Skip to content

Commit 5112408

Browse files
committed
Add documentation for tabs create button
1 parent 8f21d5b commit 5112408

File tree

1 file changed

+19
-3
lines changed

1 file changed

+19
-3
lines changed

docs/30-components/tabs.mdx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,10 @@ Die Zuordnung der Daten im Attribut **`_tabs`** zu den Div-Elementen erfolgt aut
3939

4040
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
4141

42-
| Event | Auslöser | Value |
43-
|----------|----------------------|----------------------------|
44-
| `select` | Tab wurde ausgewählt | Index des ausgewählten Tab |
42+
| Event | Auslöser | Value |
43+
|----------|--------------------------------|----------------------------|
44+
| `select` | Tab wurde ausgewählt | Index des ausgewählten Tab |
45+
| `create` | Create-Button wurde angeklickt | - |
4546

4647
### Beispiel
4748

@@ -69,6 +70,21 @@ Um eine Registerkarte zu deaktivieren, verwenden Sie das Attribut **`_disabled`*
6970

7071
Wenn Sie eine schließbare Registerkarte benötigen, können Sie dies über das Attribut **`_on`** und den Wert **"onClose":true** realisieren.
7172

73+
### Create-Button
74+
75+
Mit dem Attribut **`_has-create-button`** lässt sich ein zusätzlicher Button in der Tab-Navigation aktivieren. Dieser Button erscheint am Ende der Tab-Leiste und ermöglicht es Usern, neue Tabs dynamisch hinzuzufügen.
76+
77+
#### Code
78+
79+
```html
80+
<kol-tabs _tabs='[{"_label":"Tab 1"},{"_label":"Tab 2"}]' _has-create-button>
81+
<div>Inhalt von Tab 1</div>
82+
<div>Inhalt von Tab 2</div>
83+
</kol-tabs>
84+
```
85+
86+
<kol-link _href="https://develop--kolibri-public-ui.netlify.app/#/tabs/create-button" _target="_blank" _label="Beispiel in der Sample App"></kol-link>
87+
7288
### Best practices
7389

7490
- Verwenden Sie Registerkarten, um verwandte Inhalte so zu organisieren und zu gruppieren, dass Nutzer:innen die Seite nicht verlassen müssen.

0 commit comments

Comments
 (0)