Verwendung
Diese Komponente ist ein generischer Container, der lediglich die Funktionalität einer „Schublade“ beschreibt. Er ist seitlich platziert, initial geschlossen und kann durch Nutzerinteraktionen geöffnet und wieder geschlossen werden.
Typische Inhalte dieses Musters sind zum Beispiel:
- Filter-Facetten, die sich auf die dargestellten Daten der aktuell angezeigten Maske auswirken.
- Eine Suche mit einstellbaren Parametern innerhalb von Datensätzen einer Anwendung.
- Erweiterte Hilfefunktionen für den Fall, dass Erklärungstexte zu viel Raum in der Maske beanspruchen würden und Tooltips nicht ausreichen. In diesem Fall wird der Drawer rechtsbündig im Viewport angeordnet.
- Seitliche Navigationsleiste wie hier im Design System.
Für die direkte und unmittelbare Filterung von Daten in einer Tabelle ist diese Komponente nicht geeignet, hierfür muss das Muster Filter für Datentabellen verwendet werden (Beispielseite Tabellen).
Verhalten bei Interaktion
In den überwiegenden Anwendungsfällen ist die Bedienung identisch zu Modalen Dialogen, d. h. bei Tastaturbedienung verbleibt der Fokus innerhalb der Komponente, bis sie bewusst geschlossen wird. Für Maus- und Touch-Bedienung kann, abhängig von Art und Funktion der Inhalte definiert werden, dass die Komponente auch durch Esc oder Klick bzw. Tap neben die Komponente geschlossen werden kann.
Positionierung & responsives Verhalten
- Das Modal nimmt bis zur festgelegten Maximalbreite 100% des Viewports ein.
- Innerhalb des Modals wird nicht gescrollt. Sollten die Inhalte des Modals die verfügbare Höhe des Viewports überschreiten, so wird beim scrollen das gesamte Modal vertikal auf dem abgedunkelten Hintergrund bewegt.
