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.
Auf dieser Seite
Playground
Filter
Die Filter der Liste.
Rand
Fußzeile
Hintergrund
<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
Filtern
Benachrichtigungen
Das Backup von gestern ist um 3:12 abgeschlossen.
Diesen Termin teilen.
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
<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
Filtern
Was der Auszug enthält.
- Kopfzeile: der Titel, optional, und das kleine Schließen in der Ecke.
- Körper: der Inhalt; er scrollt von selbst.
- 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-labelohne 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). |