near_me
Primeros pasos
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downlocal_mall
Recursos
keyboard_arrow_downEl nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.
Navigation Drawer
Los cajones de navegación de mdui pueden deslizarse desde el lado izquierdo o derecho de la página. Una página puede tener varios cajones de navegación.
El comportamiento de los cajones de navegación varía ligeramente entre móviles, tabletas y ordenadores. Puedes observar los cambios en el cajón de navegación izquierdo de esta página ajustando el ancho del navegador:
- Altura
- En dispositivos móviles y tabletas, la altura del cajón de navegación siempre es del 100%.
- En equipos de escritorio, los cajones de navegación no cubren la barra de aplicaciones de forma predeterminada y se sitúan justo debajo de la parte superior de la página, a una altura equivalente a la de la barra de aplicaciones. Añadir la clase
.mdui-drawer-full-heighthace que el cajón de navegación ocupe toda la altura, lo que puede hacer que cubra la barra de aplicaciones. Puedes añadir.mdui-appbar-inseta la barra de aplicaciones para evitar que el cajón de navegación la cubra.
- Color de fondo y sombra
- En dispositivos móviles y tabletas, los cajones de navegación tienen un fondo blanco y una sombra de forma predeterminada.
- En dispositivos de escritorio, los cajones de navegación tienen un fondo transparente y ninguna sombra de forma predeterminada. Añadir la clase
.mdui-color-[color]permite establecer el color de fondo y añadir una sombra.
- Visibilidad
- En dispositivos móviles y tabletas, los cajones de navegación están ocultos de forma predeterminada.
- En dispositivos de escritorio, los cajones de navegación están visibles de forma predeterminada.
- Añadir la clase
.mdui-drawer-openhace que el cajón de navegación sea visible de forma predeterminada en todos los dispositivos; añadir.mdui-drawer-closelo hace oculto de forma predeterminada en todos los dispositivos.
- Superposición
- En dispositivos móviles y tabletas, siempre se muestra una superposición cuando se abre el cajón de navegación.
- En equipos de escritorio, no se muestra una superposición de forma predeterminada al abrir el cajón de navegación. Establecer el parámetro
overlayentruemuestra la superposición al abrirlo. Si se configura para mostrar una superposición, conviene añadir la clase.mdui-drawer-closepara que el cajón de navegación permanezca oculto por defecto.
Modo de uso
- (Si el componente se genera dinámicamente, es necesario llamar a
mdui.mutation()para inicializarlo) - Llamada vía JavaScript
Lectura relacionada
Pautas de diseño de Material Design: Patrones - Navigation Drawer
Modo de uso
Estructura HTML
<!-- La clase mdui-drawer-body-left añade padding-left al body; añádela siempre que haya un cajón de navegación a la izquierda abierto por defecto. -->
<!-- La clase mdui-drawer-body-right añade padding-right al body; añádela siempre que haya un cajón de navegación a la derecha abierto por defecto. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">
<!-- Cajón de navegación predeterminado a la izquierda -->
<div class="mdui-drawer">
... drawer content ...
</div>
<!-- Para colocar el cajón de navegación a la derecha, añade la clase mdui-drawer-right -->
<div class="mdui-drawer mdui-drawer-right">
... drawer content ...
</div>
</body>Llamada vía atributos
Este método no requiere escribir JavaScript. Basta con añadir el atributo mdui-drawer="options" a un elemento activador (por ejemplo, un botón). Al invocarlo mediante atributos personalizados, también es necesario un parámetro adicional target para especificar el cajón de navegación que se va a controlar, cuyo valor es el selector CSS del cajón.
<body class="mdui-drawer-body-right">
<button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>
<div class="mdui-drawer" id="left-drawer">
... left drawer content ...
<button class="mdui-btn" mdui-drawer-close>close</button>
</div>
</body>Se pueden añadir atributos a los elementos dentro del cajón de navegación para enlazar eventos, y también son aplicables cuando se utiliza el método de llamada con JavaScript.
| Atributo | Descripción |
|---|---|
mdui-drawer-close | Al hacer clic en este elemento se activa el evento close.mdui.drawer y se cierra el cajón de navegación. |
Llamada vía JavaScript
// selector es el selector CSS o el elemento DOM del cajón de navegación
// options son los parámetros de configuración; consulta la lista de parámetros más abajo
var inst = new mdui.Drawer(selector, options);Parámetro
| Nombre | Tipo | Valor por defecto | Descripción |
|---|---|---|---|
overlay | boolean | false | Si se muestra una superposición al abrir el cajón de navegación. Este parámetro solo se aplica a pantallas medianas y superiores; en pantallas extra pequeñas y pequeñas siempre se muestra una superposición. |
swipe | boolean | false | Si se habilitan los gestos de deslizamiento. |
Método
| Nombre del método | Descripción |
|---|---|
open | Mostrar el cajón de navegación. |
close | Ocultar el cajón de navegación. |
toggle | Alternar la visibilidad del cajón de navegación. |
getState | Devuelve el estado actual del cajón de navegación. Incluye cuatro estados (opening, opened, closing, closed). |
Evento
| Nombre del evento | Descripción | Objetivo | Parámetros |
|---|---|---|---|
open.mdui.drawer | Se activa cuando el cajón de navegación empieza su animación de apertura. | <div class="mdui-drawer"></div> | event._detail.inst: instancia |
opened.mdui.drawer | Se activa cuando el cajón de navegación completa su animación de apertura. | ||
close.mdui.drawer | Se activa cuando el cajón de navegación empieza su animación de cierre. | ||
closed.mdui.drawer | Se activa cuando el cajón de navegación completa su animación de cierre. |
Lista de clases CSS
| Nombre de clase | Descripción |
|---|---|
.mdui-drawer | Define un cajón de navegación. |
.mdui-drawer-right | Un cajón de navegación en el lado derecho de la página. |
.mdui-drawer-full-height | Hace que el cajón de navegación ocupe toda la altura. |
.mdui-drawer-open | Hace que el cajón de navegación sea visible por defecto. |
.mdui-drawer-close | Hace que el cajón de navegación esté oculto por defecto. |
.mdui-drawer-body-left | Añade padding-left a body. |
.mdui-drawer-body-right | Añade padding-right a body. |