علامات التبويب
تبويبات بتسطير مبنية على React Aria. يرسم التبويب النشط خطًا أزرق بعرض 2px أسفل النص، ويمكن لكل تبويب اختياريًا أن يحمل أيقونة بادئة وشارة عدد لاحقة، كما في المثال أدناه.
التثبيت
يمكنك إضافة مكوّن علامات التبويب هذا باستخدام CLI أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add tabsهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
جدول المحتويات
علامات التبويب مبنية على React Aria للتنقل بلوحة المفاتيح باستخدام roving-tabindex وتلقائياً TabList / TabPanel الارتباط. سنتناول المواضيع التالية:
- تبويبات أساسية
- شارات العدد والأيقونات الأمامية
- تبويبات بشكل حبة دواء
- التنقل بلوحة المفاتيح
- التحديد المتحكَّم به
تبويبات بشكل حبة دواء
PillTab هو الشقيق كامل الاستدارة للتبديل بين العروض المحلية بدلاً من اللوحات ذات المسارات. يأتي بنمطين: blue (الافتراضي - مبدّل التغييرات/المتصفح في لوحة محادثة الذكاء الاصطناعي) والأهدأ gray، يُستخدم لصفوف النطاق والتصفية مثل صفحة إعدادات الأدوات. يشترك كلاهما في معالجة الحالة الخاملة والتمرير ذاتها؛ ويختلف فقط الزر المحدد.
import { RiGlobalLine, RiInfinityLine } from "@remixicon/react";import { PillTab, PillTabList } from "@/components/base/tabs/pill-tab";
// Blue (default) - panel view switchers<PillTabList> <PillTab icon={RiInfinityLine} isSelected={view === "changes"} onSelect={() => setView("changes")}> Changes </PillTab> <PillTab icon={RiGlobalLine} isSelected={view === "browser"} onSelect={() => setView("browser")}> Browser </PillTab></PillTabList>
// Gray - quieter scope / filter rows<PillTabList> <PillTab variant="gray" isSelected={scope === "Home"} onSelect={() => setScope("Home")}> Home </PillTab></PillTabList>