عنصر التحكم المقسّم
مبدّل أحادي الاختيار على مسار ثلاثي مع إبهام أبيض منزلق - مبدّل أسبوعي / شهري / سنوي من بطاقات المخططات. مبني على React Aria ToggleButtonGroup: مفاتيح الأسهم للتنقل، Space للتحديد.
التثبيت
يمكنك إضافة عنصر التحكم المقسّم هذا باستخدام CLI أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add segmented-controlهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
التحديد المتحكَّم به
يستخدم التحديد واجهة API لمجموعة المفاتيح في React Aria: مرّر selectedKeys + onSelectionChange للتحكم فيه، أو defaultSelectedKeys للوضع غير المتحكم به. احرص على الحماية من المجموعات الفارغة للإبقاء على مقطع واحد نشطاً دائماً.
const [period, setPeriod] = useState(new Set(["weekly"]));
<SegmentedControl selectedKeys={period} onSelectionChange={(keys) => keys.size > 0 && setPeriod(new Set(keys))} aria-label="Period"> <SegmentedControlItem id="weekly">Weekly</SegmentedControlItem> <SegmentedControlItem id="monthly">Monthly</SegmentedControlItem></SegmentedControl>