Tree

نصب

pnpm dlx @simurgh-ui/cli add tree

import { Tree, TreeItem } from '@simurgh-ui/react/tree';
import { Tree as VueTree, TreeItem as VueTreeItem } from '@simurgh-ui/vue/tree';
import { TreeDirective, TreeItemComponent } from '@simurgh-ui/angular/tree';
import '@simurgh-ui/styles/tree.css';

پیش‌نمایش واقعی

Live component Tree ◆

• Documents
  • Guide
• Images

استفاده

React

<Tree aria-label="فایل‌ها">
  <TreeItem label="سندها" defaultExpanded>
    <TreeItem label="راهنما" />
    <TreeItem label="قفل‌شده" disabled />
  </TreeItem>
  <TreeItem label="تصویرها" />
</Tree>

Vue

<Tree aria-label="فایل‌ها">
  <TreeItem label="سندها" default-expanded>
    <TreeItem label="راهنما" />
    <TreeItem label="قفل‌شده" disabled />
  </TreeItem>
  <TreeItem label="تصویرها" />
</Tree>

Angular

<ul simurghTree aria-label="فایل‌ها">
  <simurgh-tree-item label="سندها" [expandable]="true" [expanded]="true">
    <simurgh-tree-item label="راهنما" />
    <simurgh-tree-item label="قفل‌شده" [disabled]="true" />
  </simurgh-tree-item>
  <simurgh-tree-item label="تصویرها" />
</ul>

Tree دادهٔ سلسله‌مراتبی را به‌صورت یک توقف Tab نمایش می‌دهد؛ برای پیمایش سایت از آن استفاده نکنید. ریشه label کوتاه، هر شاخه نام‌های یکتا و گره‌های unavailable حالت disabled داشته باشند. جهت‌های بالا و پایین میان موردهای دیداری حرکت می‌کنند؛ Home و End به مرزها می‌روند و جهت‌های راست و چپ بازشدن، بسته‌شدن و حرکت میان والد و فرزند را کنترل می‌کنند.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.