قائمة منسدلة

قائمة منبثقة قابلة للتركيب مبنية على React Aria - حيث يختار Select قيمة في عنصر التشغيل الخاص به، وDropdown عبارة عن لوحة حرة من صفوف الإجراءات المجمّعة بسطح BoardUI (نصف قطر 16، ظل منسدل) وتأثير ظهور بمقياس 150ms + ضبابية. الوصفة ذاتها وراء قوائم الفريق والحساب في الشريط الجانبي للوحة التحكم وقائمة الإضافة في محرر دردشة الذكاء الاصطناعي.

التثبيت

يمكنك إضافة مكوّن القائمة المنسدلة هذا باستخدام CLI الخاص بنا أو يدويًا:

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

CLI

يدوي

تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.

npx boardui@latest add dropdown

هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.

منتقي النموذج

قائمة النماذج في محرر محادثة الذكاء الاصطناعي: تعمل الصفوف كمجموعة راديو - محدد يبقي الصف الحالي مميزاً ويجلس رمز الراديو في نهاية الصف عبر justify-between.

{/* Radio-group rows: selected state on the row + a radio glyph at the end */}const [model, setModel] = useState("Fable 5");
<Dropdown isOpen={isOpen} onOpenChange={setIsOpen}>  <DropdownTrigger className="…pill trigger with the current model + chevron…">    {model}    <ChevronDownSmall className={cx("size-4", isOpen && "rotate-180")} />  </DropdownTrigger>
  <DropdownPopover aria-label="Models" placement="bottom start">    <DropdownGroup label="Models">      <div role="radiogroup" aria-label="Model" className="flex w-full flex-col gap-1">        {MODELS.map((name) => (          <DropdownItem            key={name}            selected={name === model}            onSelect={() => {              setModel(name);              setIsOpen(false);            }}            className="justify-between gap-2.5"          >            <span className="truncate text-body-medium text-text-primary">{name}</span>            <RadioDot selected={name === model} />          </DropdownItem>        ))}      </div>    </DropdownGroup>  </DropdownPopover></Dropdown>

قائمة الفريق

قائمة بطاقة الفريق في الشريط الجانبي: رأس وتذييل يعيشان جنباً إلى جنب مع DropdownGroups كعناصر شقيقة عادية، وتحمل الصفوف شارات لاحقة، و DropdownDivider ينزّ عبر حشو اللوحة بين الأقسام.

{/* Header, grouped rows with counters, and a footer in one panel */}<Dropdown isOpen={isOpen} onOpenChange={setIsOpen}>  <DropdownTrigger aria-label="Board team" className="…team card styles…">    <Avatar size="md" color="blue" src="/logo.png" alt="Board team" />    …name, email, chevron…  </DropdownTrigger>
  <DropdownPopover aria-label="Board team menu" className="w-[265px]" dialogClassName="gap-[7px]">    <div className="flex items-center gap-2 px-2 pt-1">      <Avatar size="md" color="blue" src="/logo.png" alt="Board team" />      …name + email…    </div>
    <DropdownGroup>      <DropdownItem onSelect={close}>        <span className="flex min-w-0 flex-1 items-center gap-2">          <RiMessage2Line className="size-5 text-foreground-icon-secondary" aria-hidden />          <span className="truncate text-body-medium text-text-primary">Messages</span>        </span>        <Counter color="neutral" className="bg-team-menu-count-background text-team-menu-count-foreground">94</Counter>      </DropdownItem>    </DropdownGroup>
    <DropdownDivider />
    <DropdownGroup label="Company">…</DropdownGroup>  </DropdownPopover></Dropdown>

قائمة الحساب

محوّل الحساب في الشريط الجانبي: تعرض الصفوف صور رمزية بدلاً من أيقونات، وتُغلق اللوحة بزوجين من الأزرار الثانوية - محتوى الصف حر الشكل، لذا يمكن وضع أي شيء داخل DropdownItem.

{/* Row content is free-form: avatars, then buttons below a divider */}<DropdownPopover aria-label="Account menu" className="w-[265px]">  <DropdownGroup label="Users with access">    {users.map((user) => (      <DropdownItem key={user.name} onSelect={close} className="px-2 py-1.5">        <Avatar size="xs" color={user.color} initials={user.initials} />        <span className="truncate text-body-medium text-text-primary">{user.name}</span>      </DropdownItem>    ))}  </DropdownGroup>
  <DropdownDivider className="my-3.5" />
  <div className="flex items-center gap-3 px-2 pb-2">    <Button variant="secondary" size="small" leadingIcon={RiAddFill} className="flex-1">      Add user    </Button>    <Button variant="secondary" size="small" leadingIcon={RiEqualizer3Line} className="flex-1">      Manage    </Button>  </div></DropdownPopover>