Skip to content

Commit cd70770

Browse files
deleoniodeleonio
authored
docs: removed outdated warning and enhanced tree component documentation (#325)
2 parents 84383fb + 875d900 commit cd70770

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

‎docs/30-components/tree.mdx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@ import { ExampleLink } from '@site/src/components/ExampleLink';
1515

1616
Synonyme: List, Navigation
1717

18-
<kol-alert _type="warning" _variant="card">
19-
<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.
20-
</kol-alert>
21-
22-
Die Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen.
18+
Die **Tree**-Komponente stellt eine hierarchische Liste dar, in der jedes Element untergeordnete Einträge enthalten kann. Elemente mit Kindelementen lassen sich ein- oder ausklappen, um die untergeordnete Ebene anzuzeigen oder auszublenden.
2319

2420
### Code
2521

@@ -61,21 +57,25 @@ Die Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in de
6157

6258
## Verwendung
6359

64-
Eine **Tree**-Komponente wird verwendet, um komplexe, hierarchische Datenstrukturen visuell darzustellen und zu navigieren. Sie ermöglicht es Benutzern, sich effizient durch verschachtelte Informationen zu bewegen und bietet eine klare Übersicht über die Beziehungen zwischen den verschiedenen Elementen. Solche Komponenten sind nützlich in Anwendungen wie Navigatoren, Organisationsdiagrammen, Produktkatalogen und überall dort, wo eine strukturierte Darstellung von Daten erforderlich ist.
65-
Das **`_label`**-Attribut wird für den Text und das **`_href`**-Attribut für den Link des Navigationspunkts genutzt. Zusätzlich lässt sich das aktive Element über das Attribut **`_active`** steuern, sowie im Standardzustand über das **`_open`** Attribut öffnen.
60+
Die Tree-Komponente wird verwendet, um komplexe, hierarchisch aufgebaute Daten visuell darzustellen und benutzerfreundlich navigierbar zu machen. Sie ermöglicht es Nutzerinnen und Nutzern, sich effizient durch verschachtelte Strukturen zu bewegen und liefert dabei eine klare Übersicht über die Beziehungen zwischen über- und untergeordneten Elementen.
6661

67-
### Tastatursteuerung
62+
Typische Einsatzbereiche sind z. B. Navigationsleisten, Organisationsstrukturen, Dateiverzeichnisse oder Produktkataloge – überall dort, wo Inhalte strukturiert und mehrstufig angezeigt werden sollen.
6863

69-
| Taste | Funktion |
70-
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
71-
| `Tab` | Der Tree lässt sich zudem mittels Tabulator-Taste fokussieren. |
72-
| `Pfeil-Tasten` | Die Pfeiltasten können für die Navigation der Elemente im Tree verwendet werden, um das Untermenü zu öffnen oder zu schließen sowie zwischen den Navigationspunkten zu springen. Dabei wird die linke/rechte Pfeiltaste für das Öffnen oder Schließen des Untermenüs und die oben/unten Pfeiltaste für das Wechseln zwischen den Navigationselementen verwendet. |
73-
| `Enter` | Selektiert das derzeitig fokussierte Element und navigiert, falls das **`_href`**-Attribut gesetzt wurde. |
74-
| `Home` | Fokussiert das erste Element in der Tree-Komponenten |
75-
| `End` | Fokussiert das letzte Element in der Tree-Komponenten |
76-
| `*` | Öffnet, alle Geschwister-Elemente der derzeitig fokussierten Ebene |
64+
Jeder Navigationspunkt wird über das Attribut `_label` beschriftet und kann optional über `_href` mit einem Ziel verlinkt werden. Mit dem Attribut `_active` lässt sich ein Element als aktuell aktiv markieren, während `_open` steuert, ob ein Element beim initialen Laden aufgeklappt ist.
65+
66+
### Tastatursteuerung
7767

78-
Zusätzlich können Elemente in der **Tree**-Komponente mit Alphanumerischen-Tasten gesucht und fokussiert werden. In dem oben gennanten Beispiel, würde durch die Taste `S` das Element mit dem **`_label`** `Subpage 1` fokussiert werden und bei wiederholten Drücken der selben Taste die `Subpage 2`, etc.
68+
| Taste | Funktion |
69+
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
70+
| `Tab` | Fokussiert die Tree-Komponente, sodass sie per Tastatur bedient werden kann. |
71+
| `↑ / ↓` | Navigiert zwischen sichtbaren Elementen auf derselben Ebene. |
72+
| `→` | Öffnet das Untermenü des aktuell fokussierten Elements (sofern vorhanden). |
73+
| `←` | Schließt das Untermenü (sofern geöffnet) oder verschiebt den Fokus auf das übergeordnete Element. |
74+
| `Enter` | Aktiviert das aktuell fokussierte Element. Wenn ein `_href`-Attribut vorhanden ist, erfolgt eine Navigation zum Ziel. |
75+
| `Pos1` | Fokussiert das erste Element der Tree-Komponente. |
76+
| `Ende` | Fokussiert das letzte Element der Tree-Komponente. |
77+
| `*` | Öffnet alle geschlossenen Geschwisterelemente auf der aktuell fokussierten Ebene. |
78+
| Alphanumerisch | Durch Eingabe eines Buchstabens wird das nächste Element fokussiert, dessen `_label` mit diesem Zeichen beginnt. Bei wiederholtem Drücken desselben Buchstabens wird zum jeweils nächsten passenden Element weitergesprungen. |
7979

8080
## Links und Referenzen
8181

0 commit comments

Comments
 (0)