Tree view

A hierarchy the keyboard walks — the ARIA tree: one tab stop, the arrows move and open, a letter jumps, branches load on demand.

WebDépréciéNavigation

Web uniquement — React, depuis @krizaka/ui/tree-view. Déprécié : conservé pour les apps qui l'utilisent encore, retiré à sa prochaine version majeure.

Pourquoi il est là. No product uses it and no planned work needs it: the documentation tree is Fumadocs' and the datasets screens drill down with a list.

DépréciéDepuis 3.6.0, retiré en 4.0.0. No product uses it and no planned work needs it: the documentation tree is Fumadocs' and the datasets screens drill down with a list. Utiliser à la place : List.

Quand l’utiliser

The documentation's sections (krizaka.com/docs).
A studio's datasets, folders of files.

Quand ne pas l’utiliser

For two levels or fewer: a list with headings reads better.À la place : List
On a phone: drill down screen by screen with a list.À la place : List

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { TreeView } from "@krizaka/ui/tree-view";

Exemples

Documentation

Products, sections and pages, the current page selected.

Orazaka
- Getting started
- Studios12
  - Dubbing
  - Transcript
  - Clips
- API reference
Orochia
Krizaka UI

Loaded on demand

A branch fetches its files when it opens.

Voices3
Glossaries2
README.md

Props

A hierarchy to browse — documentation sections, a studio's datasets, folders: one tab stop, the arrows walk it (→ opens, ← closes or goes up), Home/End, a letter jumps to the next name; branches can load their children on demand.

Prop	Type	Défaut	Description
`aria-label`requis	`string`	—	The tree's accessible name (“Documentation”).
`nodes`requis	`readonly TreeNode[]`	—	The roots.
`className`	`string`	—	Classes merged on the tree.
`defaultExpanded`	`readonly string[]`	`[]`	The ids open at first, uncontrolled.
`defaultSelected`	`string \| null`	`null`	The selected node at first, uncontrolled.
`expanded`	`readonly string[]`	—	The ids of the open branches (controlled).
`loadingLabel`	`string`	`Loading`	The words of a branch that is loading (“Loading”).
`onExpandedChange`	`((expanded: string[]) => void)`	—	Called with the open branches.
`onLoadChildren`	`((node: TreeNode) => void)`	—	Called when a branch with `hasChildren` and no `children` opens: fetch them, then pass them in `nodes`.
`onSelect`	`((node: TreeNode) => void)`	—	Called when a node is chosen (click, Enter or Space): navigate, open the file.
`selected`	`string \| null`	—	The selected node (controlled).

Accessibilité

tree, treeitem and group with level, position and size; a loading branch is busy.
Web only: a phone drills down with lists.

Clavier

Touches	Action
`Arrow Down / Arrow Up`	Move to the next or previous visible node.
`Arrow Right`	Opens a closed branch, or moves to its first child.
`Arrow Left`	Closes an open branch, or moves to its parent.
`Home / End`	Move to the first or last visible node.
`Enter / Space`	Select the node (`onSelect`).
`A letter`	Moves to the next node whose name starts with it.

Bonnes pratiques

Open the branch of the selected node at first (defaultExpanded).
Load big branches on demand (hasChildren + onLoadChildren).

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub