مجموعة الأزرار
صف من الأزرار بالأسلوب الثانوي مدمجة في عنصر تحكم واحد - حدود مشتركة، radius/2lg وshadow/xs من عائلة Button، العناصر مفصولة بخطوط رفيعة مع تدوير الزوايا الخارجية فقط. للمبدّل المقسّم بإبهام متحرك، استخدم Segmented Control بدلًا من ذلك؛ مجموعة الأزرار هي نكهة شريط الأدوات/الفلتر.
التثبيت
يمكنك إضافة مكوّن مجموعة الأزرار هذا باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add button-groupهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
العنصر المحدد
محدد يبقي العنصر على تعبئة التمرير الخاصة به ويضبط aria-pressed - قُدها من الحالة لأشرطة أدوات الاختيار الفردي أو المتعدد.
const [view, setView] = useState("list");
<ButtonGroup aria-label="View"> {views.map(({ id, label, icon }) => ( <ButtonGroupItem key={id} leadingIcon={icon} selected={view === id} onClick={() => setView(id)} > {label} </ButtonGroupItem> ))}</ButtonGroup>أيقونة فقط
iconOnly تنهار العناصر إلى مربعات - أعطِ كل منها aria-label بما أنه لا يوجد نص مرئي.
{/* Icon-only items are square - aria-label each one */}<ButtonGroup size="small" aria-label="Formatting"> <ButtonGroupItem iconOnly leadingIcon={RiBold} aria-label="Bold" /> <ButtonGroupItem iconOnly leadingIcon={RiItalic} aria-label="Italic" /> <ButtonGroupItem iconOnly leadingIcon={RiUnderline} aria-label="Underline" /></ButtonGroup>