Drawer

Panel lateral modal sobre el <dialog> nativo, anclado al final por defecto. Mismo comportamiento que el diálogo: foco atrapado, página inerte y cierre con Escape, fondo o ✕.

Angular

Filtros

Limpiar

Aplicar

Vue

<flt-button variant="outline" (pressed)="open.set(true)">Filtros</flt-button>
<flt-drawer title="Filtrar movimientos" [(open)]="open">
  <flt-checkbox label="Sólo cargos" />
  …
  <flt-button fltDrawerFooter variant="ghost" (pressed)="open.set(false)">Limpiar</flt-button>
  <flt-button fltDrawerFooter (pressed)="open.set(false)">Aplicar</flt-button>
</flt-drawer>

<FltButton variant="outline" @pressed="open = true">Filtros</FltButton>
<FltDrawer v-model:open="open" title="Filtrar movimientos">
  <FltCheckbox label="Sólo cargos" />
  …
  <template #footer>
    <FltButton variant="ghost" @pressed="open = false">Limpiar</FltButton>
    <FltButton @pressed="open = false">Aplicar</FltButton>
  </template>
</FltDrawer>

Navegación (lado inicial)

Anclado al inicio, el lado de lectura: a la izquierda en español y a la derecha en idiomas de derecha a izquierda.

Angular

Menú

Vue

<flt-drawer title="Mi cuenta" side="start" size="sm" [(open)]="open">
  <nav>…</nav>
</flt-drawer>

<FltDrawer v-model:open="open" title="Mi cuenta" side="start" size="sm">
  <nav>…</nav>
</FltDrawer>