Drawer

Synonyme: Seitenpanel, Navigationsschublade, Side Panel

Beschreibung: Die Drawer-Komponente ist ein ausklappbares Seitenfenster, das zusätzliche Informationen oder Navigationselemente anzeigt. Sie wird typischerweise von der Seite in den Viewportbereich eingeklappt und kann durch Benutzer oder programmgesteuert geöffnet und geschlossen werden.

Beispiel

Standard-Drawer mit Label und Inhalt:

Dies ist der Inhalt des Drawers.

<KolDrawer _align="left" _hasCloser={true} _label="Drawer" ><p>Dies ist der Inhalt des Drawers.</p></KolDrawer>

Barrierefreiheit

• Das _label-Attribut bietet eine semantische Beschriftung für die Komponente, die von Screenreadern als aria-label verwendet wird.
• Beim Öffnen des Drawers wird der Fokus automatisch in den Drawer-Inhalt verschoben, um Screenreader-Nutzer zu benachrichtigen, dass ein neuer UI-Bereich verfügbar ist.
• Beim Schließen wird der Fokus zum ursprünglichen Element zurückgeführt.
• Alle fokussierbaren Elemente außerhalb des Drawers werden deaktiviert, um unbeabsichtigte Interaktionen mit dem Hintergrund zu verhindern.
• Die Komponente unterstützt vollständige Tastaturnavigation.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Navigiert durch die fokussierbaren Elemente innerhalb des Drawers.
Shift + Tab	Navigiert rückwärts durch die fokussierbaren Elemente.
ESC	Schließt den geöffneten Drawer.

Best Practices / Empfehlungen

• Setzen Sie immer das _label-Attribut, um die Komponente zugänglich und für Benutzer verständlich zu machen.
• Verwenden Sie die _align-Option zur Ausrichtung, um den Drawer an den Kontext anzupassen (z.B. left für Navigationsmenüs, right für sekundäre Inhalte).
• Aktivieren Sie _hasCloser, um Benutzern einen visuellen Schließ-Button anzubieten.
• Nutzen Sie die Methoden open() und close() oder das Attribut _open zur programmgesteuerten Steuerung.
• Verwenden Sie _on mit onClose-Callback, um Aktionen nach dem Schließen auszuführen.
• Der Drawer sollte nicht für kritische Primärinhalte genutzt werden, sondern für sekundäre Informationen oder Navigationshilfen.
• Begrenzen Sie die Inhalte auf wesentliche Informationen, um Ablenkung zu vermeiden.

Anwendungsfälle

• Navigationsmenüs und Menü-Toggle in responsiven Designs
• Filter- und Suchoptionen in Listen oder Tabellen
• Zusätzliche Aktionen und Einstellungen
• Kontextabhängige Informationen und Details
• Seitliche Navigationshilfen (z.B. Inhaltsverzeichnis, Kategorien)

Playground

Dies ist der Inhalt des Drawers.

Align

<KolDrawer _align="left" _hasCloser={true} _label="Drawer" ><p>Dies ist der Inhalt des Drawers.</p></KolDrawer>

Funktionalitäten

Basis-Drawer mit Label und Inhalt

Der Drawer zeigt einen definierten Inhaltsbereich über den Slot an:

Dies ist der Inhalt des Drawers.

<KolDrawer _align="left" _hasCloser={true} _label="Drawer Titel" ><p>Dies ist der Inhalt des Drawers.</p></KolDrawer>

Ausrichtung

Die Position des Drawers wird über das _align-Attribut gesteuert:

Dies ist der Inhalt des Drawers.

Align

<KolDrawer _align="left" _hasCloser={true} _label="Drawer" ><p>Dies ist der Inhalt des Drawers.</p></KolDrawer>

Schließ-Button

Aktivieren Sie _hasCloser, um einen visuellen Schließ-Button anzuzeigen:

Dies ist der Inhalt des Drawers.

<KolDrawer _align="left" _hasCloser={true} _label="Drawer" ><p>Dies ist der Inhalt des Drawers.</p></KolDrawer>

Programmgesteuerte Kontrolle

Verwenden Sie das _open-Attribut zur React-State-basierten Steuerung oder die Methoden open() und close():

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
close	Der Drawer wird geschlossen (durch Benutzer oder Programm)	undefined

Animationen

Optional können Animationen mit Keyframes hinzugefügt werden. Dabei ist es wichtig, dass die Keyframe-Namen slideIn bzw. slideOut enthalten und auf der Klasse drawer__wrapper definiert sind.

Beispiel:

.drawer__wrapper {
 &--left {
  animation: slideInLeft $duration forwards;
  &.is-closing {
   animation: slideOutLeft $duration forwards !important;
  }
 }
 &--right {
  animation: slideInRight $duration forwards;
  &.is-closing {
   animation: slideOutRight $duration forwards;
  }
 }
 &--top {
  animation: slideInTop $duration forwards;
  &.is-closing {
   animation: slideOutTop $duration forwards;
  }
 }
 &--bottom {
  animation: slideInBottom $duration forwards;
  &.is-closing {
   animation: slideOutBottom $duration forwards;
  }
 }
}

API

Properties

Property	Attribute	Description	Type	Default
_align	_align	Defines the visual orientation of the component.	"bottom" | "left" | "right" | "top" | undefined	undefined
_hasCloser	_has-closer	Defines whether the element can be closed.	boolean | undefined	false
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_level	_level	Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.	0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined	0
_on	--	Specifies the EventCallback function to be called when the drawer is closing.	undefined | ({ onCancel?: ((event: Event) => void) | undefined; onClose?: (() => void) | undefined; onToggle?: ((open: boolean) => void) | undefined; })	undefined
_open	_open	Opens/expands the element when truthy, closes/collapses when falsy.	boolean | undefined	undefined

Methods

close

close() => Promise<void>

Closes the drawer.

Returns

Type: Promise<void>

open() => Promise<void>

[DEPRECATED] Use show() or showModal() instead.

Opens the drawer.

Returns

Type: Promise<void>

show(modal?: boolean) => Promise<void>

Opens the drawer. Pass true to open as a modal drawer.

Parameters

Name	Type	Description
modal	boolean

Returns

Type: Promise<void>

showModal() => Promise<void>

Opens the drawer as a modal.

Returns

Type: Promise<void>

Slots

Slot	Description
	The Content of drawer.

---

Beispiele