Drawer

Un panel que se desliza desde un borde de la pantalla, sobre el contenido, abierto por un botón. La persona lo usa, lo cierra y regresa a donde estaba.

En esta página

Playground

Borde

Pie

Fondo

HTML

<button class="feitio-button" type="button" popovertarget="pg-drawer">Abrir el panel</button><div class="feitio-drawer" id="pg-drawer" popover role="dialog" aria-label="Filtros"><div class="drawer-header"><h2>Filtros</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-drawer" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Cerrar</button></div><div class="drawer-body"><p>Los filtros de la lista.</p></div></div>

Cuándo usarlo

Para la navegación del producto en móvil (el AppShell).
Para los filtros de una lista en móvil, o los detalles de un elemento sin salir de la lista.

Cuándo no usarlo

Para confirmar: Diálogo.
Un formulario largo: una página.
Un panel que abre otro: nunca.

Ejemplos

Desde cualquier borde

Derecha (por defecto), izquierda, arriba o abajo. El título y el pie de página son opcionales; el pequeño botón de cerrar siempre está presente. Se cierra con Esc o un toque fuera.

Mostrar código

HTML

<button type="button" class="feitio-button" popovertarget="filtros">…Filtros</button>
<div class="feitio-drawer" id="filtros" popover role="dialog" aria-labelledby="filtros-t">
  <div class="drawer-header">
    <h2 id="filtros-t">Filtros</h2>                       <!-- opcional -->
    <button type="button" class="feitio-button close" data-size="small" popovertarget="filtros" popovertargetaction="hide">…Fechar</button>
  </div>
  <div class="drawer-body">…</div>
  <div class="drawer-footer">…</div>                      <!-- opcional -->
</div>

Anatomía

Lo que contiene el panel lateral.

Título: el título, opcional, y el pequeño botón de cerrar en la esquina.
Cuerpo: el contenido; se desliza por sí mismo.
Pie de página, opcional: la acción, fuera del desplazamiento.

Estados

Abrir y cerrar: se desliza y el fondo se oscurece.
Abrir: Esc, el botón de cerrar o un toque fuera lo cierran; el foco vuelve al botón de apertura.
Cerrado: no ocupa espacio ni recibe foco.

Hacer y no hacer

Filtros en un panel lateral, con la acción indicando el resultado: "Mostrar 12 resultados".

La persona sabe qué va a pasar antes de cerrar.

Don’t

"¿Está seguro de que desea eliminar?" dentro de un panel lateral.

Un panel lateral se cierra con un toque fuera; una decisión no puede ser accidental.

El botón apunta al panel (popovertarget); el navegador indica si está abierto.
El panel tiene un nombre: el título, o aria-label sin uno.

Atributos

Atributo	Valores	Para qué sirve
`class="feitio-drawer"` + `popover`	obligatorio	El panel, fuera de la pantalla hasta que se abre.
`data-side`	`"end"`, `"start"`, `"top"`, `"bottom"`	Desde qué borde entra.
`class="drawer-header"`, `"drawer-body"`, `"drawer-footer"`	las partes	Cabecera, cuerpo y pie (opcional).