# Drawer

Ein Panel, das von einer Bildschirmkante über den Inhalt geschoben wird und durch einen Button geöffnet wird. Die Person nutzt es, schließt es und kehrt zurück, wo sie war.

## Playground

```html
<button class="feitio-button" type="button" popovertarget="pg-drawer">Panel öffnen</button><div class="feitio-drawer" id="pg-drawer" popover role="dialog" aria-label="Filter"><div class="drawer-header"><h2>Filter</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>Schließen</button></div><div class="drawer-body"><p>Die Filter der Liste.</p></div></div>
```

## Wann verwenden

-   Für die Produktnavigation auf dem Handy (das AppShell).
-   Für Filter einer Liste auf dem Handy oder für Details eines Elements ohne das Verlassen der Liste.

## Wann nicht verwenden

-   **Zur Bestätigung:** Dialog.
-   **Ein langes Formular:** eine Seite.
-   **Eine Schublade, die etwas anderes öffnet:** nie.

## Beispiele

### Von jeder Kante

Rechts (Standard), links, oben oder unten. Titel und Fußzeile sind optional; das kleine Schließen ist immer vorhanden. Es schließt mit Esc oder einem Klick außerhalb.

Code anzeigen

```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>
```

## Anatomie

1.  **Kopfzeile:** der Titel, optional, und das kleine Schließen in der Ecke.
2.  **Körper:** der Inhalt; er scrollt von selbst.
3.  **Fußzeile**, optional: die Aktion, außerhalb des Scrollbereichs.

## States

-   **Öffnen und schließen:** es gleitet, und der Hintergrund wird gedimmt.
-   **Offen:** Esc, Schließen oder ein Klick außerhalb schließt es; der Fokus kehrt zur Öffnungs-Button zurück.
-   **Geschlossen:** nimmt keinen Platz und keinen Fokus ein.

## Do and don't

Do

Filter in einem Auszug, mit der Aktion, die das Ergebnis angibt: "Anzeigen 12 Ergebnisse".

Die Person weiß, was passiert, bevor es geschlossen wird.

Don’t

"Möchten Sie wirklich löschen?" innerhalb eines Auszugs.

Eine Schieberegel schließt mit einem Klick außerhalb; eine Entscheidung darf nicht zufällig sein.

## Barrierefreiheit

-   Der Button zeigt auf die Schieberegel (`popovertarget`); der Browser gibt an, ob sie geöffnet ist.
-   Die Schieberegel hat einen Namen: den Titel oder `aria-label` ohne diesen.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-drawer"` + `popover`

erforderlich

Die Schieberegel, außerhalb des Bildschirms bis zum Öffnen.

`data-side`

`"end"`, `"start"`, `"top"`, `"bottom"`

Von welchem Rand aus sie eintritt.

`class="drawer-header"`, `"drawer-body"`, `"drawer-footer"`

die Teile

Kopf, Körper und Fußzeile (optional).