0
249
ViewsCreación de un panel lateral similar al lápiz de código
Estoy tratando de crear un panel lateral similar al del editor de codepen en reaccionar, donde puedes arrastrar para ajustar el tamaño de los diferentes editores.
Si arrastro un encabezado de editor hacia la parte inferior lo suficientemente bajo, el editor debajo lo seguirá, casi como si hubiera agregado ese componente al arrastre, de la misma manera si trato de arrastrar el encabezado hacia arriba. He construido el diseño a mi gusto con un concepto similar al acordeón de material UI:
https://mui.com/material-ui/react-accordion/
También pude imitar los comportamientos al hacer clic en el encabezado de codepen, por ejemplo, hacer doble clic abriría el editor a tamaño completo y hacer triple clic se abriría de manera uniforme al realizar un seguimiento de las alturas de todos los 'contenedores' en un useState gancho. Sin embargo, tengo problemas con la parte de arrastre. Estoy buscando algunas sugerencias de buenas bibliotecas/ideas para ayudarme a lograr esto.
Actualmente estoy usando el movimiento del marco para hacer que la expansión del contenedor sea más 'suave'.
https://www.framer.com/docs/transition/
Noté que también tienen capacidades de arrastre que también estoy explorando. Mi idea es tener un onDrag para cada uno de los encabezados. Según el encabezado que esté arrastrando, si arrastro hacia abajo hasta que el tamaño de mi contenedor sea 0, empiezo a encoger el contenedor debajo de él y luego el que está debajo y así sucesivamente. Puedo obtener la propiedad Y de la función onDrag pero dudo un poco en hacer mis cálculos en coordenadas x/y. ¿Alguien tiene alguna sugerencia o alguna biblioteca que pueda hacer esto más fácil?
1 answers
Answer question0
No conozco ninguna biblioteca. Creo que si llegaste tan lejos, probablemente puedas hacerlo tú mismo en js simple, usando oyentes y selectores, etc., o cualquier reacción que pueda proporcionar. ¿Hay algo específico que te haga 'vacilar'? Recientemente encontré estos que me facilitaron las cosas, es posible que no sean 100% relevantes, pero aún así es bueno saberlos: getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect decir la posición relativa a la ventana gráfica, fue útil para mí arrastrar divisores entre paneles. Y si necesita la posición relativa al contenedor: https://stackoverflow.com/a/11634823/5350539 Y si aún no lo ha hecho, supongo que podría considerar configurar las posiciones CSS del panel usando 'abajo' (con posición absoluto o relativo), luego animar la altura a, por ejemplo, 30 px menos que el borde inferior del panel superior. Sugerencia: mientras arrastra, agregue una clase de cuerpo para deshabilitar la selección de usuario: selección de usuario: ninguno;