Drawer
Drawer muestra navegación o contenido auxiliar en un panel lateral con estado controlado.
Playground
Este playground muestra un drawer de navegación con las regiones prepend, contenido principal y append. Puedes comparar lado, ancho, apariencia y modos de posicionamiento.
Diferencia de posicionamiento
En modo normal, el drawer participa en el layout. En modo absoluto, se superpone al contenido.
Referencia API
Consulta las props públicas verificadas de EDrawer. Su evento y sus slots se resumen después de la tabla.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | boolean | false |
Controla si el drawer está abierto y admite enlace bidireccional con v-model. | ||
| nav | boolean | false |
Renderiza la raíz del drawer como un elemento nav semántico en lugar de aside. | ||
| right | boolean | false |
Coloca el drawer en el lado derecho en lugar del izquierdo. | ||
| width | string | number | 16 |
Define el ancho del drawer como número o cualquier medida CSS válida. | ||
| widthUnit | string | rem |
Proporciona la unidad CSS usada cuando width es un número o una cadena numérica. | ||
| floating | boolean | false |
Separa la superficie de los bordes y aplica el fondo, radio y elevación opcional del modo flotante. | ||
| appearance | 'default' | 'transparent' | default |
Selecciona la superficie predeterminada o una apariencia transparente. | ||
| elevation | ElevationLevel | sm |
Aplica una sombra del framework cuando el drawer es absolute o floating. | ||
| absolute | boolean | false |
Posiciona el drawer de forma absoluta y activa el overlay temporal mientras está abierto. | ||
| fixed | boolean | false |
Aplica el modificador de posicionamiento fijo del drawer. | ||
| autoFocus | boolean | true |
Mueve el foco al drawer cuando se activa el comportamiento de overlay temporal. | ||
| restoreFocus | boolean | true |
Devuelve el foco al elemento anterior cuando se cierra un drawer temporal. | ||
| disabled | boolean | false |
Aplica la clase de estado deshabilitado a la raíz del drawer. | ||
| devMode | boolean | false |
Desactiva la adaptación automática al breakpoint para que el comportamiento absolute dependa solo de esa prop. | ||
Evento
EDrawer emite update:modelValue cuando cambia su estado abierto.
Slots
Los slots prepend y append enmarcan el slot default desplazable con regiones de contenido persistente.