Tree
Treeは、階層データを展開可能なツリー形式で表示するコンポーネントです。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs">
<Tree.Item label="node_modules">
<Tree.Item label="react" />
<Tree.Item label="react-dom" />
<Tree.Item label="@yamada-ui">
<Tree.Item label="react" />
<Tree.Item label="utils" />
</Tree.Item>
</Tree.Item>
<Tree.Item label="src">
<Tree.Item label="components">
<Tree.Item label="tree.tsx" />
<Tree.Item label="index.ts" />
</Tree.Item>
<Tree.Item label="app">
<Tree.Item label="about">
<Tree.Item label="layout.tsx" />
<Tree.Item label="page.tsx" />
</Tree.Item>
<Tree.Item label="layout.tsx" />
<Tree.Item label="page.tsx" />
</Tree.Item>
</Tree.Item>
<Tree.Item label="pnpm-lock.yaml" />
<Tree.Item label="package.json" />
<Tree.Item label="tsconfig.json" />
<Tree.Item label="README.md" />
</Tree.Root>
使い方
import { Tree } from "@yamada-ui/react"
import { Tree } from "@/components/ui"
import { Tree } from "@workspaces/ui"
<Tree.Root>
<Tree.Item>
<Tree.Item />
</Tree.Item>
<Tree.Item />
</Tree.Root>
Tree.Itemのlabelが文字列の場合は、valueを省略することができます。itemsを使う
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const items = useMemo<Tree.ItemType[]>(
() => [
{
children: [
{ label: "react" },
{ label: "react-dom" },
{
children: [{ label: "react" }, { label: "utils" }],
label: "@yamada-ui",
},
],
label: "node_modules",
},
{
children: [
{
children: [{ label: "tree.tsx" }, { label: "index.ts" }],
label: "components",
},
{
children: [
{
children: [{ label: "layout.tsx" }, { label: "page.tsx" }],
label: "about",
},
{ label: "layout.tsx" },
{ label: "page.tsx" },
],
label: "app",
},
],
label: "src",
},
{ label: "pnpm-lock.yaml" },
{ label: "package.json" },
{ label: "tsconfig.json" },
{ label: "README.md" },
],
[],
)
return <Tree.Root maxW="2xs" items={items} />
バリアントを変更する
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<VStack>
<For each={["subtle", "solid"]}>
{(variant, index) => (
<Tree.Root
key={index}
maxW="2xs"
variant={variant}
defaultSelectedValue="node_modules"
items={treeItems}
/>
)}
</For>
</VStack>
サイズを変更する
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<VStack>
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<Tree.Root
key={index}
maxW="2xs"
size={size}
defaultExpandedValue={["src"]}
defaultSelectedValue="node_modules"
items={treeItems}
/>
)}
</For>
</VStack>
形を変更する
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<VStack>
<For each={["rounded", "square", "circle"]}>
{(shape, index) => (
<Tree.Root
key={index}
maxW="2xs"
defaultSelectedValue="node_modules"
items={treeItems}
shape={shape}
/>
)}
</For>
</VStack>
特定の項目を展開済みにする
最初から特定の項目を展開済みにする場合は、defaultExpandedValueに項目の値を設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root
maxW="2xs"
defaultExpandedValue={["src", "src/components"]}
items={treeItems}
/>
特定の項目を選択済みにする
特定の項目を選択済みにする場合は、defaultSelectedValueに項目の値を設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs" defaultSelectedValue="node_modules" items={treeItems} />
複数の項目を選択する
複数の項目を選択する場合は、multipleをtrueに設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs" items={treeItems} multiple />
チェックボックスを有効にする
項目にチェックボックスを有効にする場合は、checkableをtrueに設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs" checkable items={treeItems} />
特定の項目をチェック済みにする
特定の項目をチェック済みにする場合は、defaultCheckedValueに項目の値を設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root
maxW="2xs"
checkable
defaultCheckedValue={["package.json"]}
items={treeItems}
/>
項目を無効にする
項目を無効にする場合は、disabledを設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const items = useMemo<Tree.ItemType[]>(
() => [
{
children: [
{ label: "react" },
{ label: "react-dom" },
{
children: [{ label: "react" }, { label: "utils" }],
label: "@yamada-ui",
},
],
disabled: true,
label: "node_modules",
},
{
children: [
{
children: [{ label: "tree.tsx" }, { label: "index.ts" }],
label: "components",
},
{
children: [
{
children: [{ label: "layout.tsx" }, { label: "page.tsx" }],
label: "about",
},
{ label: "layout.tsx" },
{ label: "page.tsx" },
],
label: "app",
},
],
label: "src",
},
{ disabled: true, label: "pnpm-lock.yaml" },
{ label: "package.json" },
{ label: "tsconfig.json" },
{ label: "README.md" },
],
[],
)
return <Tree.Root maxW="2xs" items={items} />
リンクとして使う
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const items = useMemo<Tree.ItemType[]>(
() => [
{
children: [
{ label: "react" },
{ label: "react-dom" },
{
children: [{ label: "react" }, { label: "utils" }],
label: "@yamada-ui",
},
],
label: "node_modules",
},
{
children: [
{
children: [{ label: "tree.tsx" }, { label: "index.ts" }],
label: "components",
},
{
children: [
{
children: [{ label: "layout.tsx" }, { label: "page.tsx" }],
label: "about",
},
{ label: "layout.tsx" },
{ label: "page.tsx" },
],
label: "app",
},
],
label: "src",
},
{ label: "pnpm-lock.yaml" },
{ label: "package.json" },
{ label: "tsconfig.json" },
{
as: "a",
href: "https://yamada-ui.com",
rel: "noopener",
target: "_blank",
endElement: <SquareArrowOutUpRightIcon />,
label: "README.md",
},
],
[],
)
return <Tree.Root maxW="2xs" items={items} />
ガイドラインを表示する
ガイドラインを表示する場合は、withGuideLineをtrueに設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs" items={treeItems} withGuideLine />
インジケーターを非表示にする
インジケーターを非表示にする場合は、indicatorHiddenをtrueに設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs" indicatorHidden items={treeItems} />
アニメーションを追加する
展開・折りたたみ時にアニメーションを追加する場合は、animatedをtrueに設定します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs" animated items={treeItems} />
フィルタリング
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const [items, setItems] = useState<Tree.ItemType[]>(treeItems)
const searchItems = useCallback(
(value: string, items: Tree.ItemType[]): Tree.ItemType[] => {
if (!value.length) return items
return items
.map((item) => {
if ("children" in item) {
if (isString(item.label) && match(item.label, value)) {
return item
} else {
const children = searchItems(value, item.children)
if (children.length) return { ...item, children }
}
} else if (isString(item.label) && match(item.label, value)) {
return item
}
})
.filter((item) => !isUndefined(item))
},
[],
)
return (
<VStack gap="sm" maxW="2xs">
<Input
placeholder="Search"
onChange={(ev) => {
setItems(searchItems(ev.target.value, treeItems))
}}
/>
<Tree.Root items={items} />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。非同期で読み込む
項目の子要素を非同期で読み込む場合は、childrenの代わりにasyncChildrenを使用します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const items = useMemo<Tree.ItemType[]>(
() => [
{
asyncChildren: async () => {
await wait(1000)
return [
{ label: "react" },
{ label: "react-dom" },
{
children: [{ label: "react" }, { label: "utils" }],
label: "@yamada-ui",
},
]
},
label: "node_modules",
},
{
children: [
{
children: [{ label: "tree.tsx" }, { label: "index.ts" }],
label: "components",
},
{
children: [
{
children: [{ label: "layout.tsx" }, { label: "page.tsx" }],
label: "about",
},
{ label: "layout.tsx" },
{ label: "page.tsx" },
],
label: "app",
},
],
label: "src",
},
{ label: "pnpm-lock.yaml" },
{ label: "package.json" },
{ label: "tsconfig.json" },
{ label: "README.md" },
],
[],
)
return <Tree.Root maxW="2xs" items={items} />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。ローディングスキームを変更する
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const items = useMemo<Tree.ItemType[]>(
() => [
{
asyncChildren: async () => {
await wait(1000)
return [
{ label: "react" },
{ label: "react-dom" },
{
children: [{ label: "react" }, { label: "utils" }],
label: "@yamada-ui",
},
]
},
label: "node_modules",
},
{
children: [
{
children: [{ label: "tree.tsx" }, { label: "index.ts" }],
label: "components",
},
{
children: [
{
children: [{ label: "layout.tsx" }, { label: "page.tsx" }],
label: "about",
},
{ label: "layout.tsx" },
{ label: "page.tsx" },
],
label: "app",
},
],
label: "src",
},
{ label: "pnpm-lock.yaml" },
{ label: "package.json" },
{ label: "tsconfig.json" },
{ label: "README.md" },
],
[],
)
return <Tree.Root maxW="2xs" items={items} loadingScheme="dots" />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。項目をすべて展開・折りたたむ
項目をすべて展開または折りたたむ場合は、controlRefを使用します。
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const controlRef = useRef<Tree.Control>(null)
return (
<VStack gap="md">
<ButtonGroup.Root>
<ButtonGroup.Item onClick={() => controlRef.current?.expand()}>
Expand All
</ButtonGroup.Item>
<ButtonGroup.Item onClick={() => controlRef.current?.collapse()}>
Collapse All
</ButtonGroup.Item>
</ButtonGroup.Root>
<Tree.Root maxW="2xs" controlRef={controlRef} items={treeItems} />
</VStack>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。要素をカスタマイズする
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root
maxW="2xs"
items={treeItems}
startElement={{
group: ({ expanded }) =>
expanded ? <FolderOpenIcon /> : <FolderClosedIcon />,
item: <FileIcon />,
}}
/>
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root maxW="2xs" endElement={<LockKeyholeIcon />} items={treeItems} />
インジケーターをカスタマイズする
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
<Tree.Root
maxW="2xs"
indicator={({ expanded }) =>
expanded ? <SquareMinusIcon /> : <SquarePlusIcon />
}
items={treeItems}
indicatorProps={{ _expanded: { transform: "rotate(0deg)" } }}
/>
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。制御する
- node_modules
- src
- pnpm-lock.yaml
- package.json
- tsconfig.json
- README.md
const [selectedValue, setSelectedValue] = useState<string>("package.json")
const [checkedValue, setCheckedValue] = useState<string[]>(["README.md"])
const [expandedValue, setExpandedValue] = useState<string[]>(["node_modules"])
return (
<Tree.Root
maxW="2xs"
checkable
checkedValue={checkedValue}
expandedValue={expandedValue}
items={treeItems}
selectedValue={selectedValue}
onCheckedChange={setCheckedValue}
onExpandedChange={setExpandedValue}
onSelectedChange={setSelectedValue}
/>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
Treeは、アクセシビリティに関してWAI-ARIA - TreeView Patternに従います。
aria-labelを設定すると、スクリーンリーダーによって読み上げられます。
<Tree.Root aria-label="My Documents" />
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
Tab | 選択されている項目または最初の項目にフォーカスします。 | - |
ArrowUp | 無効ではない前の項目をフォーカスします。 | - |
Shift + ArrowUp | 無効ではない前の項目をフォーカスし、その項目を選択します。 | multiple={true} |
Control + Shift + ArrowUp | すべての項目を折りたたみます。 | - |
ArrowDown | 無効ではない次の項目をフォーカスします。 | - |
Shift + ArrowDown | 無効ではない次の項目をフォーカスし、その項目を選択します。 | multiple={true} |
Control + Shift + ArrowDown | すべての項目を展開します。 | - |
ArrowRight | フォーカスしている項目が折りたたまれている場合は展開します。展開されている場合は最初の子項目をフォーカスします。 | - |
ArrowLeft | フォーカスしている項目が展開されている場合は折りたたみます。折りたたまれている場合は親項目をフォーカスします。 | - |
Space, Enter | フォーカスしている項目を選択します。グループの場合は展開・折りたたみを切り替えます。 | - |
Shift + Space, Enter | 最初に選択した項目からフォーカスしている項目までの項目をすべて選択します。 | multiple={true} |
Home | 無効ではない最初の項目をフォーカスします。 | - |
End | 無効ではない最後の項目をフォーカスします。 | - |
Control + A | 無効ではないすべての項目を選択します。 | multiple={true} |
a-z, A-Z | 入力した文字から始まる値の展開されている項目をフォーカスします。 | - |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
Tree.Root | role="tree" | ツリーであることを示します。 |
aria-multiselectable | multiple={true}またはcheckable={true}が設定されている場合は"true"を設定します。 | |
Tree.Item | role="treeitem" | ツリーの項目であることを示します。 |
aria-expanded | 項目が展開されている場合は"true"を設定し、折りたたまれている場合は"false"を設定します。 | |
aria-selected | 項目が選択されている場合は"true"を設定します。 | |
aria-disabled | 項目が無効な場合は"true"を設定します。 | |
aria-level | 項目の階層を設定します。 | |
aria-labelledby | 関連したTree.Item > div > spanのidを設定します。 | |
Tree.Item > ul | role="group" | グループであることを示します。 |
aria-labelledby | 関連したTree.Item > div > spanのidを設定します。 | |
aria-busy | 項目が読み込み中の場合は"true"を設定します。 | |
Tree.Item > div > input | id | 親のTree.Item > div > inputと関連付けするために使用するid |
aria-controls | 関連した子のTree.Item > div > inputのidを設定します。 | |
aria-labelledby | 関連したTree.Item > div > spanのidを設定します。 | |
Tree.Item > div > span | id | Tree.ItemとTree.Item > ulとTree.Item > div > inputを関連付けするために使用するid |
類似のコンポーネント
DataList
DataListは、データ項目のリストを表示するために使用されます。
List
Listは、リストを表示するコンポーネントです。デフォルトでは、ul要素をレンダリングします。
NativeAccordion
NativeAccordionは、HTMLのdetails要素を使用して情報を展開または折りたたんで表示するリストのコンポーネントです。
Accordion
Accordionは、情報を展開または折りたたんで表示するリストのコンポーネントです。
Timeline
Timelineは、イベントのリストを時系列に表示するために使用されるコンポーネントです。
Tabs
Tabsは、異なる表示領域を切り替えるコンポーネントです。
NativeTable
NativeTableは、データを効率的に整理して表示するコンポーネントです。
Sidebar
Sidebarは、サイドバーにアイテムのリストを表示するコンポーネントです。