Cajón

Los Navigation Drawers brindan acceso a los destinos en su aplicación. Las hojas laterales son superficies que contienen contenido complementario que están ancladas al borde izquierdo o derecho de la pantalla.

Navigation Drawers proveen acceso a destinos o funcionalidades de su aplicación, como cambiar de cuentas. Pueden estar permanentemente en pantalla o controlados por un ícono del menú de navegación.

Las hojas laterales son superficies suplementarias que se usan principalmente en tabletas y computadores de escritorio.

Drawer temporal

Los Drawers temporales puedes estar abiertos o cerrados. Cerrados por defecto, el Drawer se abre temporalmente sobre todo el contenido de la app, hasta que se seleccione una opción.

El Drawer puede ser cancelado, haciendo click sobre el Overlay o presionando la tecla Escape del teclado. Se cierra además, cuando un elemento es seleccionado, a partir del manejo de la propiedad open.

{['left', 'right', 'top', 'bottom'].map((anchor) => (
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
    <Drawer
      anchor={anchor}
      open={state[anchor]}
      onClose={toggleDrawer(anchor, false)}
    >
      {list(anchor)}
    </Drawer>
  </React.Fragment>
))}

Swipeable

Puedes hacer que el Drawer sea deslizable con el componente SwipeableDrawer.

Este componente viene con una sobrecarga de carga gzipped de 2 kB. Algunos dispositivos móviles de baja gama no podrán seguir los dedos a 60 FPS. Puede utilizar la propiedad disableBackdropTransition para ayudar.

{['left', 'right', 'top', 'bottom'].map((anchor) => (
  <React.Fragment key={anchor}>
    <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
    <SwipeableDrawer
      anchor={anchor}
      open={state[anchor]}
      onClose={toggleDrawer(anchor, false)}
      onOpen={toggleDrawer(anchor, true)}
    >
      {list(anchor)}
    </SwipeableDrawer>
  </React.Fragment>
))}

Las siguientes propiedades son usadas en la web de documentación para una óptima usabilidad del componente:

iOS está alojado en dispositivos de gama alta. La transición de Backdrop puede ser habilitada sin perder frames. El rendimiento será lo suficientemente bueno.
iOS tiene un gesto "deslizar para volver" que interfiere con la función de descubrimiento, por lo tanto esta debe ser deshabilitada.

const iOS =
  typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);

<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />;

Swipeable edge

You can configure the SwipeableDrawer to have a visible edge when closed.

If you are on a desktop, you can toggle the drawer with the "OPEN" button. If you are on mobile, you can open the demo in CodeSandbox ("edit" icon) and swipe.

Keep mounted

To ensure a temporary drawer is not unmounted, specify the ModalProps prop like:

<Drawer
  variant="temporary"
  ModalProps={{
    keepMounted: true,
  }}
/>

More details in the Modal performance section.

Drawer responsivo

El componente utilitario responsivo Hidden permite mostrar diferentes tipos de cajones dependiendo del ancho de la pantalla. Un Drawer temporary se muestra para pantallas pequeñas mientras que un Drawer permanent se muestra para pantallas mas anchas.

Drawer persistente

Los Drawers persistentes pueden intercambiarse entre abierto o cerrado. El Drawer descansa en la misma superficie de elevación que el contenido. Está cerrado por defecto y se abre seleccionando el ícono del menú, y permanece abierto hasta que es cerrado por el usuario. El estado del Drawer es recordado de acción a acción y de sesión a sesión.

Cuando el Drawer está fuera de la grilla de la página y se abre, fuerza al otro contenido a cambiar su tamaño y adaptarse a la vista más pequeña.

Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation.

Cajón variante mini

En esta variación, el cajón de navegación persistente cambia su ancho. Su estado de descanso es un mini-cajón con la misma elevación que el contenido, cortado por la barra de la aplicación. Cuando se expande, aparece como el cajón de navegación persistente estándar.

La variante mini está recomendada para secciones de la aplicación que necesiten acceso a selección rápida junto al contenido.

Cajón permanente

Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed.

Aplicaciones enfocadas en consumo de información que usan jerarquía de izquierda a derecha.

Navegación de altura completa