Mi Cajón Izquierdo Persistente no reduce el contenido a su derecha, Material UI.

Answer

1. 

   davy.ai

   June 5, 2023 at 7:08 am

   Solución para crear un cajón izquierdo persistente con React – Material UI

   Para crear un cajón izquierdo persistente con React – Material UI, necesitamos utilizar el componente MuiDrawer proporcionado por Material UI. Podemos pasar la propiedad open a este componente para controlar el estado del cajón.

   Para lograr el resultado deseado de reducir el contenido a la derecha cuando el cajón está abierto, podemos hacer uso del gancho makeStyles proporcionado por Material UI para definir estilos para nuestros componentes.

   Aquí hay un ejemplo de cómo puede lograr esto:

   import React, { useState } from 'react';
   import { makeStyles } from '@material-ui/core/styles';
   import Drawer from '@material-ui/core/Drawer';
   import Typography from '@material-ui/core/Typography';
   
   const drawerWidth = 240;
   
   const useStyles = makeStyles((theme) => ({
     root: {
       display: 'flex',
     },
     drawer: {
       width: drawerWidth,
       flexShrink: 0,
     },
     drawerPaper: {
       width: drawerWidth,
     },
     content: {
       flexGrow: 1,
       padding: theme.spacing(3),
       transition: theme.transitions.create(['margin'], {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.leavingScreen,
       }),
       marginLeft: -drawerWidth,
     },
     contentShift: {
       transition: theme.transitions.create(['margin'], {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.enteringScreen,
       }),
       marginLeft: 0,
     },
   }));
   
   function PersistentDrawerLeft() {
     const classes = useStyles();
     const [open, setOpen] = useState(false);
   
     const handleDrawerOpen = () => {
       setOpen(true);
     };
   
     const handleDrawerClose = () => {
       setOpen(false);
     };
   
     return (
       <div classname="{classes.root}">
         <drawer classname="{classes.drawer}" variant="persistent" anchor="left" open="{open}" classes="{{" paper:="" classes.drawerpaper,="" }}="">
           <div>
             <typography variant="h6">Contenido del cajón</typography>
           </div>
         </drawer>
         <main classname="{`${classes.content}" ${open="" classes.contentshift="" :="" ''}`}="">
           <div>
             <typography variant="h6">Contenido principal</typography>
           </div>
         </main>
       </div>
     );
   }
   
   export default PersistentDrawerLeft;
   
   

   En este código, definimos un componente PersistentDrawerLeft que representa nuestro cajón izquierdo y el contenido principal. El estado open es administrado por el componente utilizando el gancho useState de React.

   Definimos nuestros estilos utilizando el gancho makeStyles y especificamos el ancho de nuestro cajón y los estilos para nuestro contenido principal. También especificamos las propiedades de transición para que nuestro contenido principal se mueva hacia la derecha cuando el cajón está abierto.

   Utilizamos el componente Drawer de Material UI para renderizar nuestro cajón izquierdo y pasamos el estado open para controlar su estado. También pasamos nuestros estilos definidos al cajón utilizando la propiedad de classes.

   Finalmente, utilizamos el elemento main para renderizar nuestro contenido principal y aplicar nuestros estilos sobre él utilizando las clases content y contentShift basadas en el estado de nuestro cajón.

   Espero que esto te ayude a crear un cajón izquierdo persistente con React – Material UI.

Comments are closed.