البناء · جديد

مبدّل المحتوى

يبدّل فورًا بين خيارين إلى أربعة عروض أو مرشّحات للمحتوى نفسه، مثل يوم وأسبوع وشهر؛ خيار واحد محدد دائمًا.

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/content-switcher

الاعتماديات التي يضيفها: @base-ui/react

الاستخدام

import { ContentSwitcher, ContentSwitcherItem } from "@/components/ui/content-switcher";

<ContentSwitcher aria-label="Period" defaultValue="day">
  <ContentSwitcherItem value="day">Day</ContentSwitcherItem>
  <ContentSwitcherItem value="week">Week</ContentSwitcherItem>
  <ContentSwitcherItem value="month">Month</ContentSwitcherItem>
</ContentSwitcher>

أمثلة

المقاسات

‏sm بارتفاع 32 (الافتراضي)، وmd بارتفاع 40، وlg بارتفاع 48.

عدّادات وأيقونات

عدد بعد التسمية، أو أيقونات وحدها مع إبقاء التسمية لقارئ الشاشة (showLabel={false}).

معطّل

خيار غير متاح بعد، ثم المبدّل كله.

مرجع الخصائص

ContentSwitcher

الخاصية	النوع	الافتراضي	الوصف
`size`	`"sm" \| "md" \| "lg"`	`"sm"`	خاصية Size: ‏32 أو 40 أو 48 بكسل.
`value / defaultValue`	`string`		الخيار المحدد (متحكَّم به أو أولي). في Figma يُحدَّد الأول.
`onValueChange`	`(value: string) => void`		يُستدعى عند اختيار خيار.
`dividers`	`boolean`	`true`	خاصية Divider: خطوط بين الخيارات غير المحددة.
`disabled`	`boolean`	`false`	يعطّل كل الخيارات.
`aria-label`	`string`		اسم الاختيار لقارئ الشاشة («الفترة»).

ContentSwitcherItem

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`		قيمة الخيار في المبدّل.
`children`	`ReactNode`		خاصية Label: كلمة واحدة قصيرة، وهي اسم الخيار حتى مع إخفائها.
`showLabel`	`boolean`	`true`	خاصية Show label. عند إيقافها تبقى الأيقونة وحدها.
`iconLeading`	`IconComponent`		خاصية Icon: أيقونة 16 بكسل بلون التسمية.
`badge`	`number \| string`		خاصية Badge وعددها: رمادية، وBrand على الخيار المحدد.
`disabled`	`boolean`	`false`	‏State = Disabled لهذا الخيار.

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

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

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

المفتاح	ما يفعله
`Tab`	يدخل المبدّل مرة واحدة على الخيار المحدد، والضغطة التالية تغادره.
`ArrowRightArrowLeft`	ينقل التحديد إلى الخيار التالي أو السابق ويلتف عند الطرفين. في العربية ينعكس الاتجاه.
`Space`	يحدد الخيار الذي عليه التركيز.

ARIA

‏role="radiogroup" باسم من aria-label، وكل خيار role="radio" مع aria-checked.
التحديد لا يعتمد على اللون وحده: الخيار المحدد ممتلئ ونصّه أبيض، والبقية بإطار.
للتنقل بين الصفحات استخدم التبويبات، وللإعدادات التي تُحفظ استخدم أزرار الاختيار.

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

ينعكس

أول خيار على اليمين، والطرفان المستديران يتبعان الاتجاه.
الأسهم معكوسة: ArrowLeft للتالي.
الخط الفاصل على الحافة النهائية لكل خيار، أي يساره في العربية.

لا ينعكس

أيقونات الرسوم البيانية والجداول تبقى كما هي.

الأرقام: عدد الشارة يتبع إعداد الأرقام.
الخط العربي: ‏label-14 بوزن Medium بخط العرض، وارتفاع أدنى لا ثابت لأن أسطر العربية أطول.
النص ثنائي الاتجاه: التسميات لا تنكسر على سطرين؛ اجعلها كلمة واحدة بطول متقارب.

كل المكونات ›