nili/ui
enfaartr
كل المكوّنات

Dropdown

عرض شامل
١٣ تصدير٧ محور تنويع٣٦ خاصيّة٤ ملف
import { Dropdown, DropdownOption } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

الأنواع

أنماط الفتحة المتقدّمة الأربعة من نظرة فيجما العامة. ولا توجد خاصية type — مرِّر أي عنصر عبر startAdornment. ويتضمّن كل مثال التسمية الفرعية الاختيارية ورمز المعلومات والتلميح.

أيقونة

This is a hint text to help user.

بلد

This is a hint text to help user.

مستخدم

This is a hint text to help user.

شركة

This is a hint text to help user.

import {
  Dropdown,
  Icon,
  Avatar,
  CountryFlag,
  PlaceholderLogo,
} from "@nili/ui"
import { RiFlashlightLine } from "@remixicon/react"

// Icon
const iconOptions = [
  {
    value: "design",
    label: "Design",
    startAdornment: <Icon icon={RiFlashlightLine} />,
  },
]

// Country
const countryOptions = [
  {
    value: "ir",
    label: "Iran",
    startAdornment: <CountryFlag code="ir" size="sm" />,
  },
]

// User
const userOptions = [
  {
    value: "sophia",
    label: "Sophia Williams",
    description: "Product design",
    startAdornment: <Avatar size="3xs" name="Sophia Williams" />,
  },
]

// Company
const companyOptions = [
  {
    value: "apex",
    label: "Apex Financial",
    description: "Finance & Banking",
    startAdornment: (
      <PlaceholderLogo company="apex-financial" size="xs" label="" />
    ),
  },
]

export function Example() {
  return (
    <Dropdown
      label="Label"
      sublabel="(Optional)"
      information
      hint="This is a hint text to help user."
      placeholder="Select…"
      options={iconOptions}
    />
  )
}

الأحجام

الحجم md (‏٤٠ بكسل) هو الافتراضي. ويطابق sm وxs مقياس Text Input.

import { Dropdown } from "@nili/ui"

export function Example() {
  return (
    <>
      <Dropdown size="md" label="Medium" options={options} />
      <Dropdown size="sm" label="Small" options={options} />
      <Dropdown size="xs" label="X-Small" options={options} />
    </>
  )
}

المظاهر

النمط default هو الحقل الكامل. ويُسقط compact الإطار لأشرطة أدوات أكثف. وinline نصّي فقط.

default
compact
inline
import { Dropdown } from "@nili/ui"

export function Example() {
  return (
    <>
      <Dropdown appearance="default" options={options} />
      <Dropdown appearance="compact" options={options} />
      <Dropdown appearance="inline" options={options} />
    </>
  )
}

قابل للبحث

فعّل searchable للقوائم الطويلة. ويبقى حقل البحث مركّزًا أثناء التنقّل في القائمة بلوحة المفاتيح.

import { Dropdown, Avatar } from "@nili/ui"

export function Example() {
  return (
    <Dropdown
      label="Assignee"
      placeholder="Search people…"
      options={userOptions}
      itemSize="lg"
      searchable
      searchPlaceholder="Search people…"
    />
  )
}

معطّل وخطأ

مرِّر error لعرض رسالة تحقّق؛ ويُعلَّم الحقل غير صالح تلقائيًا. وdisabled هي السمة disabled نفسها.

import { Dropdown } from "@nili/ui"

export function Example() {
  return (
    <>
      <Dropdown disabled label="Disabled" options={options} />
      <Dropdown
        label="Required field"
        options={options}
        error="Please select an option"
      />
    </>
  )
}