کامپوننت‌ها

درخت

نمایش ساختار سلسله‌مراتبی مثل پوشه‌ها، دسته‌بندی محصولات یا نمودار سازمانی.

import { TreeView, type TreeNode } from "@kashi-ui/react";

نمونه

اسناد۳ پوشه
- قراردادها
  - قرارداد-۱۴۰۵.pdf۲٫۴ مگابایت
  - پیوست-الف.pdf۸۰۰ کیلوبایت
- فاکتورها
- بایگانی
تصاویر
راهنما.md

انتخاب: c1

const items: TreeNode[] = [
{ id: "docs", label: "اسناد", icon: <FolderIcon />, meta: "۳ پوشه", children: [
  { id: "contracts", label: "قراردادها", icon: <FolderIcon />, children: [
    { id: "c1", label: "قرارداد-۱۴۰۵.pdf", icon: <FileIcon />, meta: "۲٫۴ مگابایت" },
  ] },
  { id: "archive", label: "بایگانی", disabled: true },
] },
];

<TreeView aria-label="فایل‌ها" items={items} selected={sel} onSelect={setSel}
defaultExpanded={["docs", "contracts"]} />

نام	نوع	پیش‌فرض	توضیح
`items`	`{ id, label, icon?, meta?, disabled?, children? }[]`	—	گره‌ها
`selected / defaultSelected`	`string \| null`	`null`	گره انتخاب‌شده
`onSelect`	`(id, node) => void`	—
`expanded / defaultExpanded`	`string[]`	`[]`	شناسهٔ گره‌های باز
`onExpandedChange`	`(ids: string[]) => void`	—
`aria-label`	`string`	—	نام درخت (الزامی)

کیبورد

کلید	عمل
`↓` / `↑`	ردیف بعد / قبل
`←` (در RTL)	باز کردن، یا رفتن به اولین زیرشاخه
`→` (در RTL)	بستن، یا رفتن به والد
`Home` / `End`	اولین / آخرین ردیف
`Enter` / `Space`	انتخاب

در صفحه‌های چپ‌به‌راست، جهت ← و → برعکس است.

دسترس‌پذیری

الگوی Tree در WAI-ARIA با role="tree"، treeitem و group؛ هر گره aria-level و aria-expanded دارد و فقط یک گره در ترتیب Tab است (roving tabindex). زیرشاخه‌های بسته رندر نمی‌شوند.