Tree View
Browse hierarchical items with expandable branches.
Preview
Import
import { TreeView } from "@sigil-ui/components";Usage
<TreeView
defaultExpanded={["src"]}
data={[{ id: "src", label: "src", children: [{ id: "components", label: "components" }, { id: "utils", label: "utils" }] }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data (required) | TreeNode[] | — | Data used to render the visualization. |
defaultExpanded | string[] | — | Default Expanded configuration. |
onSelect | (id: string) => void | — | On Select configuration. |
selectedId | string | — | Selected Id configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-sm | Radius sm |
--s-text | Text |
--s-duration-fast | Duration fast |
--s-surface | Surface |
--s-primary | Primary |
--s-text-muted | Text muted |