0
196
ViewsCree componentes desde la interfaz de usuario del material de la barra lateral que aparecen sobre todos los componentes
Estoy creando un componente de barra lateral usando el componente Material UI Drawer .
Quiero crear componentes de la barra lateral que se peguen uno al lado del otro al componente de la barra lateral como este cuadro verde en la imagen a continuación.
Traté de descifrar el código pero obtuve algo como esta imagen a continuación.
Como podemos ver, el componente de la barra lateral parece estar ubicado debajo de la página de contenido (es por eso que los cuadros naranjas están recortados). Además, el componente de la barra lateral muestra la barra de desplazamiento horizontal.
Aquí está el código: https://codesandbox.io/s/custom-sidebar-material-ui-4c05j
En este caso, lo que quiero es crear cuadros naranjas que aparezcan sobre todos los componentes (se parecen a la primera imagen de arriba).
1 answers
Answer question0
Finalmente, encontré la respuesta por mí mismo.
Para los que se preguntan la solución, estos son los pasos generales que utilicé:
- Para resolver la posición de las cajas naranjas, reemplace el componente
Drawercon el componenteContaineren el componenteSidebar. - Para mostrar los cuadros naranjas solo cuando la
Sidebarestá cerrada/minimizada, agregue el estadohoveredParent, establezca el estado en verdadero cuando el mouse ingresa al elemento principal (usandoonMouseEnterprop) y nulo cuando el mouse abandona el elemento principal. - Muestre los elementos principales o secundarios dentro de los cuadros naranjas.
- Se corrigió el estilo de las cajas naranjas.
Aquí está la solución https://codesandbox.io/s/custom-sidebar-material-ui-forked-c47yk