TreeView — درخت

برای نمایش سلسله‌مراتب: پوشه‌ها، لایه‌های یک بوم، ساختار سند. فقط ردیف‌های دیدنی رندر می‌شوند، پس فهرست‌های ده‌هزار ردیفی هم روان است.

وضعیت: beta · لایه: ۳ (@tokapps/tukکپی کد) · کد: packages/tuk/src/data-display/tree-view/کپی کد

import { TreeView } from '@tokapps/tuk';

نمونهٔ زنده

کد قابل کپی

انتخاب تکی

import { TreeView, type TreeNode } from '@tokapps/tuk';const nodes: TreeNode[] = [  { key: 'docs', label: 'مستندات', children: [{ key: 'intro', label: 'مقدمه' }] },  { key: 'readme', label: 'README' },];<TreeView aria-label="پوشه‌ها" nodes={nodes} defaultExpandedKeys={['docs']} selectionMode="single" />

حالت کنترل‌شده، انتخاب چندتایی و جابه‌جایی

<TreeView  aria-label="لایه‌ها"  nodes={nodes}  expandedKeys={expanded}  onExpandedChange={setExpanded}  selectedKeys={selected}  onSelectionChange={setSelected}  selectionMode="multiple"  onMove={({ keys, targetKey, position }) => setNodes((t) => moveNodes(t, keys, targetKey, position))}  onRename={(key, label) => rename(key, label)}/>

اکشن درون‌خطی (چشم و قفل)

const withActions = nodes.map((n) => ({  ...n,  actions: [    { id: 'visible', label: 'پنهان کردن', icon: <Icon name="show" size="sm" />, pressed: hidden.has(n.key), onPress: toggleHidden },  ],}));

همهٔ پیکربندی‌ها

رفتار

دسترس‌پذیری

• role="tree"کپی کد و treeitemکپی کد تخت با aria-levelکپی کد، aria-setsizeکپی کد، aria-posinsetکپی کد (محاسبه از داده، نه DOM) تا مجازی‌سازی درست بماند.
• aria-expandedکپی کد فقط روی گره‌های دارای فرزند؛ aria-selectedکپی کد و aria-multiselectableکپی کد.
• فوکوس rovingTabindex؛ مقصد جابه‌جایی در ناحیهٔ aria-liveکپی کد اعلام می‌شود.
• جابه‌جایی با موس جایگزین صفحه‌کلید دارد.

حرکت، صدا و چاپ

• حرکت: چرخش شورون و تغییر پس‌زمینه با --tds-dur-*کپی کد؛ در کاهش حرکت فوری.
• صدا: ندارد.
• چاپ: همهٔ ردیف‌ها بدون اسکرول؛ print="hide"کپی کد برای پنهان کردن.

توکن‌ها

• کامپوننتی: --tds-tree-view-*کپی کد (پس‌زمینه، حاشیه، تورفتگی، hover، انتخاب، رنگ و ضخامت نشانگر رها).
• تعریف در packages/tokens/src/component/tree-view.cssکپی کد؛ فهرست کامل در TreeView.tokens.tsکپی کد.