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"
      />
    </>
  )
}