Panel lateral (drawer)
Un panel deslizante para navegación o filtros. Es un único <dialog>: por debajo del punto de ruptura staticFrom se abre como modal; a partir de ese punto, el CSS lo muestra como un panel estático y el disparador se puede ocultar. Cruzar el punto de ruptura con el modal abierto lo cierra.
<a class="iv-button iv-button--secondary iv-u-lg-hidden" href="#site-drawer" data-iv-open="site-drawer">Open navigation</a>
<aside aria-label="Site navigation">
<dialog class="iv-drawer" id="site-drawer" data-iv-component="drawer" aria-label="Site navigation">
<div class="iv-drawer__panel">
<header class="iv-drawer__header">
<h2 class="iv-drawer__title">Sections</h2>
<button class="iv-button iv-button--ghost iv-button--icon iv-u-lg-hidden" type="button" data-iv-close aria-label="Close">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
</button>
</header>
<div class="iv-drawer__body">
<nav class="iv-stack iv-u-gap-2" aria-label="Sections">
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Overview</a>
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Components</a>
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Tokens</a>
<a class="iv-button iv-button--ghost iv-u-w-full iv-u-justify-start" href="#drawer-note">Accessibility</a>
</nav>
</div>
<footer class="iv-drawer__footer">
<a class="iv-button iv-button--ghost iv-button--sm iv-u-lg-hidden" href="#" data-iv-close>Close</a>
</footer>
</div>
</dialog>
</aside>
<p id="drawer-note" class="iv-u-text-sm iv-u-text-muted">Demo: below the lg breakpoint the drawer opens as a modal; from lg it is a static panel, so the opening and closing controls are hidden instead of left with nothing to do. Every row leads back to this note, not to a real page. The panel lives in an <code><aside></code>, which is how the component is told that becoming static from a breakpoint upwards is intended.</p>// data-iv-component="drawer"
{
open: "site-drawer",
close: true,
}Opciones
| Opción | Atributo | Por defecto |
|---|---|---|
placement | data-iv-placement | start (end entra desde el borde final) |
staticFrom | data-iv-static-from | lg (none lo mantiene modal en todos los tamaños) |
closeOnBackdrop, closeOnEscape, returnFocus | como en Dialog | true |
Los métodos y los eventos son los mismos que en Dialog; un cierre provocado por un cambio de tamaño informa de reason: "viewport".
Sin JavaScript
A partir del punto de ruptura estático, el panel simplemente se ve. En pantallas pequeñas, el enlace disparador apunta al id del panel y :target lo muestra como un bloque estático.
Índice de clases
Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.
| Clase | Qué hace |
|---|---|
iv-drawer__header | Banda superior del panel: título y botón de cierre. |
iv-drawer__title | Título del cajón; es lo que etiqueta al diálogo. |
iv-drawer__body | Región desplazable del panel. |
iv-drawer__footer | Banda inferior, para las acciones. |