Krizaka
Documentation

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.

WebBêtaNavigation

Web uniquement — React, depuis @krizaka/ui/tree-view. Bêta : son API peut encore changer à une version mineure.

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

Loaded on demand

A branch fetches its files when it opens.

  • 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.

PropTypeDéfautDescription
aria-labelrequisstring—The tree's accessible name (“Documentation”).
nodesrequisreadonly TreeNode[]—The roots.
classNamestring—Classes merged on the tree.
defaultExpandedreadonly string[][]The ids open at first, uncontrolled.
defaultSelectedstring | nullnullThe selected node at first, uncontrolled.
expandedreadonly string[]—The ids of the open branches (controlled).
loadingLabelstringLoadingThe 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.
selectedstring | 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

TouchesAction
Arrow Down / Arrow UpMove to the next or previous visible node.
Arrow RightOpens a closed branch, or moves to its first child.
Arrow LeftCloses an open branch, or moves to its parent.
Home / EndMove to the first or last visible node.
Enter / SpaceSelect the node (onSelect).
A letterMoves 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.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Tabs

Views of the same page, one at a time: underlined sections, a segmented switch or pills — one light glides from the active tab to the next, in every variant.

Action sheet

A short list of actions on an item from the bottom edge, the destructive one in danger, cancel apart.

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés