Composant · Navigation
TreeView
DocumentéArborescence hiérarchique : déplier/replier les branches, sélectionner une feuille,
navigation clavier (↑/↓ déplacer, →/← déplier/replier, Entrée/Espace activer, Début/Fin).
Rôles ARIA tree/treeitem + roving tabindex.
- Composants
- Button
- Input
- Formulaires
- Form
- FormGroup
- Tokens
Voir le code (Svelte)
<TreeView
defaultExpanded={["components","forms"]}
selected="button"
nodes={[{"id":"components","label":"Composants","children":[{"id":"button","label":"Button"},{"id":"input","label":"Input"}]},{"id":"forms","label":"Formulaires","children":[{"id":"form","label":"Form"},{"id":"formgroup","label":"FormGroup"}]},{"id":"tokens","label":"Tokens"}]}
/>Démo
Sélection : tokens
- Fondations
- Tokens
- Anatomie
- Thèmes
- Composants
- Actions
- Navigation
- Header
- Footer
- TreeView
- Contrats
API du composant
| Prop | Type | Par défaut |
|---|---|---|
nodes | TreeNode[] | requis |
selected | string (bindable) | optionnel |
defaultExpanded | string[] | [] |
label | string | "Arborescence" |
onselect | (id: string) => void | optionnel |
TreeNode = { id, label, children?, disabled? }.
Tokens utilisés
--st-component-control-hoverBorder--st-component-control-hoverBackground