البناء · جديد

العرض الشجري

يعرض محتوى متداخلًا مثل مجلدات الكشوفات أو دليل الحسابات، ويتيح فتح الفروع وطيّها. كل مستوى يزيح خطوة، والملفات تحت مجلدها.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/tree-view

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { TreeView } from "@/components/ui/tree-view";

<TreeView
  aria-label="Documents"
  items={[
    { id: "statements", label: "Statements", children: [{ id: "q1", label: "Q1 2026" }] },
    { id: "invoices", label: "Invoices", children: [] },
  ]}
  defaultExpanded={["statements"]}
/>

أمثلة

تحديد متحكَّم به

‏selected وexpanded من الصفحة: اختيار ملف يفتحه بجانب الشجرة. والأيقونات مخفية (showIcons={false}).

مرجع الخصائص

TreeView

الخاصية	النوع	الافتراضي	الوصف
`items`	`{ id, label, children? }[]`		الشجرة؛ العنصر الذي له `children` فرع حتى لو كانت فارغة.
`expanded / defaultExpanded`	`string[]`		الفروع المفتوحة.
`onExpandedChange`	`(ids: string[]) => void`		يُستدعى عند فتح فرع أو طيّه.
`selected / defaultSelected`	`string \| null`		الصف المحدد.
`onSelectedChange`	`(id: string) => void`		يُستدعى عند تحديد صف.
`showIcons`	`boolean`	`true`	خاصية Show icon: أيقونات المجلد والملف.
`aria-label`	`string`		اسم الشجرة لقارئ الشاشة.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	يدخل الشجرة مرة واحدة على الصف المحدد.
`ArrowDownArrowUp`	بين الصفوف الظاهرة.
`ArrowRight`	يفتح الفرع المطوي أو ينتقل إلى أول أبنائه. في العربية ArrowLeft.
`ArrowLeft`	يطوي الفرع المفتوح أو ينتقل إلى الأب. في العربية ArrowRight.
`HomeEnd`	إلى أول صف أو آخره.
`EnterSpace`	يحدد الصف.

ARIA

‏role="tree" باسم، وكل صف treeitem مع aria-level وaria-setsize وaria-posinset، وaria-expanded للفروع وaria-selected.
لا تتجاوز أربعة مستويات، ولا تستخدم الشجرة للتنقل بين أقسام التطبيق.

ملاحظات العربية والاتجاه

ينعكس

الإزاحة من اليمين، والسهم المطوي يتجه لليسار، وشريط التحديد على اليمين.
مفتاحا الفتح والطي ينعكسان: ArrowLeft يفتح وArrowRight يطوي.

لا ينعكس

أيقونات المجلد والملف.

الأرقام: الأرقام في التسميات كما كُتبت.
الخط العربي: ‏label-14 عادي، والتسمية الطويلة تُقص بنقاط.
النص ثنائي الاتجاه: امتدادات الملفات مثل ‎.pdf تنقلب داخل تسمية عربية؛ احذفها أو ضعها في <bdi>.

كل المكونات ›