قائمة الاختيار
قائمة منسدلة للاختيار مبنية على React Aria - يطابق عنصر التشغيل سطح Figma بشكل مطابق 1:1، والنافذة المنبثقة غير مشروطة حتى تستمر الصفحة في التمرير، وتقبل العناصر محتوى حراً مثل نقاط الحالة والصور الرمزية.
التثبيت
يمكنك إضافة مكوّن القائمة المنسدلة هذا باستخدام CLI أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add selectهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
مضغوط ومريح
القائمة افتراضيا هي القائمة المنسدلة المضغوطة من BoardUI: لوحة بزوايا 14px وحشوة 4px فوق صفوف متقاربة، بعرض زر التشغيل. القائمة الطويلة تمرر تحت ضبابية علوية ناعمة وتفتح على الصف المحدد. مرر variant="comfortable" للقائمة الأوسع بعرض 266px.
const years = Array.from({ length: 41 }, (_, index) => 2000 + index);
{/* Compact is the default menu: no prop needed */}<Select label="Compact" defaultSelectedKey="2026" className="w-[120px]"> {years.map((year) => ( <SelectItem key={year} id={String(year)}>{year}</SelectItem> ))}</Select>
{/* The roomier 266px menu */}<Select label="Comfortable" variant="comfortable" defaultSelectedKey="2026" className="w-[120px]"> {years.map((year) => ( <SelectItem key={year} id={String(year)}>{year}</SelectItem> ))}</Select>التسمية والنص النائب
مرّر label لتسمية حقل ظاهرة: يعرضها React Aria كتسمية لقائمة الاختيار ويسمّي بها زر الفتح، فتعلن قارئات الشاشة الاثنين معًا. يظهر placeholder إلى أن يُختار شيء. أما قوائم الاختيار التي لا تسمية ظاهرة لها، مثل عوامل التصفية أعلاه، فتأخذ aria-label بدلًا من ذلك.
{/* label names the select; placeholder shows until something is picked */}<Select label="Role" placeholder="Select a role" className="w-[240px]"> <SelectItem id="admin" textValue="Admin">Admin</SelectItem> <SelectItem id="editor" textValue="Editor">Editor</SelectItem> <SelectItem id="viewer" textValue="Viewer">Viewer</SelectItem></Select>مع نقطة الحالة
تعرض العناصر أبناء اعتباطيين بجانب التسمية - مرر دائماً textValue حتى يظل الإكمال التلقائي وتسمية الزناد صحيحَين.
import { StatusDot } from "@/components/base/badges/status-dot";
{/* Items take free-form content - dots, avatars, icons */}<Select aria-label="Purchase status" defaultSelectedKey="completed" className="w-[142px]"> <SelectItem id="completed" textValue="Completed"> <StatusDot color="green" /> Completed </SelectItem> <SelectItem id="waiting" textValue="Waiting"> <StatusDot color="yellow" /> Waiting </SelectItem> <SelectItem id="processing" textValue="Processing"> <StatusDot color="indigo" /> Processing </SelectItem></Select>