Skip to content

Commit dd6360a

Browse files
authored
Remove modal property in Drawer (#273)
2 parents 171213d + 660a63f commit dd6360a

File tree

1 file changed

+6
-14
lines changed

1 file changed

+6
-14
lines changed

docs/30-components/drawer.mdx

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@ import { Configurator } from '@site/src/components/Configurator';
1313
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
1414
import { ExampleLink } from '@site/src/components/ExampleLink';
1515

16-
Synonyme: Modal, Modal Dialog, Corner Dialog, Prompt
16+
Synonyme: Corner Dialog, Prompt
1717

1818
<kol-alert _type="warning" _variant="card">
1919
<kol-badge _color="#476af5" _label="Preview"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.
2020
</kol-alert>
2121

22-
Mithilfe der **Drawer**-Komponente können zusätzliche Informationen oder auch Navigationselemente in einem ausklappbaren Seitenfenster angezeigt werden. Ein offener Drawer kann als Modal (`_modal`) via ESC geschlossen werden.
22+
Mithilfe der **Drawer**-Komponente können zusätzliche Informationen oder auch Navigationselemente in einem ausklappbaren Seitenfenster angezeigt werden. Ein offener Drawer kann via ESC geschlossen werden.
2323

2424
Die **Drawer**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt bzw. controlled mit dem Attribut `_open` gesteuert.
2525

2626
```html
27-
<kol-drawer _label="Drawer" _open _modal _align="top"></kol-drawer>
27+
<kol-drawer _label="Drawer" _open _align="top"></kol-drawer>
2828
```
2929

3030
### Beispiel
@@ -59,14 +59,6 @@ Im _Uncontrolled_-Modus wird der Drawer über die Methoden `open()` und `close()
5959
</script>
6060
```
6161

62-
#### Uncontrolled Modal
63-
64-
```html
65-
<kol-drawer _modal _align="left" _label="Drawer">
66-
<p>Drawer Inhalt</p>
67-
</kol-drawer>
68-
```
69-
7062
#### Controlled
7163

7264
Im _Controlled_-Modus wird der Drawer über das `_open` Attribut gesteuert.
@@ -79,19 +71,19 @@ Im _Controlled_-Modus wird der Drawer über das `_open` Attribut gesteuert.
7971

8072
## Verwendung
8173

82-
Um den **Drawer** programmgesteuert zu öffnen und zu schließen, verwenden Sie die Methoden **`open()`** und **`close()`**. Stellen Sie sicher, dass das **`_label`** Attribut gesetzt ist, um die Zugänglichkeit zu gewährleisten. Die Ausrichtung des Drawers können Sie mit dem **`_align`** Attribut und den Werten **left**, **top**, **right** oder **bottom** anpassen, um ihn auf der gewünschten Seite des Bildschirms anzuzeigen. Wenn Sie den **Drawer** als **Modal** verwenden möchten, aktivieren Sie das **`_modal`** Attribut, um den Hintergrund abzudunkeln und den Fokus auf den Drawer-Inhalt zu lenken. Zudem nutzen Sie das **`_on`** Attribut, um benutzerdefinierte Aktionen beim Schließen des Drawers auszuführen. Ein offenes **Modal** kann via **ESC** geschlossen werden.
74+
Um den **Drawer** programmgesteuert zu öffnen und zu schließen, verwenden Sie die Methoden **`open()`** und **`close()`**. Stellen Sie sicher, dass das **`_label`** Attribut gesetzt ist, um die Zugänglichkeit zu gewährleisten. Die Ausrichtung des Drawers können Sie mit dem **`_align`** Attribut und den Werten **left**, **top**, **right** oder **bottom** anpassen, um ihn auf der gewünschten Seite des Bildschirms anzuzeigen. Nutzen Sie das **`_on`** Attribut, um benutzerdefinierte Aktionen beim Schließen des Drawers auszuführen. Ein offener **Drawer** kann via **ESC** geschlossen werden.
8375

8476
## Barrierefreiheit
8577

8678
Das `_label` Attribut stellt eine klare und verständliche Beschriftung für den Drawer bereit. Dies verbessert die Nutzung für Personen, die Screenreader verwenden, da das Label als **`aria-label`** fungiert und somit die Bedeutung und Funktion des Drawers erklärt.
8779

88-
### Drawer als Modal
80+
### Drawer
8981

9082
Beim Öffnen des **Drawers** wird der Fokus automatisch auf den Inhalt des Drawers gesetzt. Dies stellt sicher, dass Benutzer von Screenreadern sofort wissen, dass ein neuer Bereich geöffnet wurde, und dass sie direkt interagieren können. Beim Schließen des Drawers wird der Fokus zum vorherigen aktiven Element zurückgeführt, was eine nahtlose Benutzererfahrung bietet.
9183

9284
Die **Drawer**-Komponente unterstützt die vollständige Navigation über die Tastatur. Benutzer können mit der Tab-Taste durch die interaktiven Elemente innerhalb des Drawers navigieren. Zudem kann der **Drawer** mit der ESC-Taste schnell und einfach geschlossen werden, was die Bedienung erleichtert.
9385

94-
Während der **Drawer** (als Modal) geöffnet ist, werden alle selektierbaren Elemente außerhalb des Drawers deaktiviert. Dies verhindert ungewollte Interaktionen mit dem Hintergrundinhalt und lenkt die Aufmerksamkeit der Benutzer auf den **Drawer**-Inhalt.
86+
Während der **Drawer** geöffnet ist, werden alle selektierbaren Elemente außerhalb des Drawers deaktiviert. Dies verhindert ungewollte Interaktionen mit dem Hintergrundinhalt und lenkt die Aufmerksamkeit der Benutzer auf den **Drawer**-Inhalt.
9587

9688
### Tastatursteuerung
9789

0 commit comments

Comments
 (0)