القائمة المتتالية

تجريبي

حقل يفتح أعمدة من الخيارات المتداخلة، كالمحافظة واللواء والمنطقة، ويملأ الحقل بالمسار كاملًا.

المعاينة

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

أضف المكوّن
$ npx ritla add cascader
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/cascader
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

cascader.tsx

import { Cascader } from "@/components/ui/cascader";<Cascader label="Delivery area" options={areas} onValueChange={setPath} />

الخاصية	النوع	الافتراضي	الوصف
`options`	`{ value, label, children?, disabled? }[]`	لا يوجد	الشجرة؛ المستوى الأخير بلا `children`.
`value / defaultValue / onValueChange`	`string[]`	لا يوجد	المسار المختار، قيمة لكل مستوى.
`levelLabels`	`string[]`	لا يوجد	اسم كل عمود لقارئ الشاشة.
`placeholder / separator`	`string`	`" / "`	النص قبل الاختيار، والفاصل بين المستويات.
`label / required / helperText / error / disabled / name`	`…`	لا يوجد	كما في القائمة.

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

المفتاح	ما يفعله
`EnterSpace`	يفتح اللوحة، ويفتح العمود التالي، ويختار في المستوى الأخير.
`ArrowDownArrowUp`	ينتقل داخل العمود.
`ArrowRightArrowLeft`	إلى العمود التالي أو السابق. في العربية التالي ArrowLeft.
`Escape`	يغلق اللوحة ويعيد التركيز إلى الحقل.