nili/ui
enfaartr
Tüm bileşenler

Dropdown

Genel görünüm
13 export7 varyant ekseni36 prop4 dosya
import { Dropdown, DropdownOption } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Türler

Figma genel bakışındaki dört ön yuva deseni. Bir type prop’u yoktur — herhangi bir düğümü startAdornment ile geçin. Her örnek isteğe bağlı alt etiketi, bilgi simgesini ve ipucunu içerir.

Simge

This is a hint text to help user.

Ülke

This is a hint text to help user.

Kullanıcı

This is a hint text to help user.

Şirket

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

Boyutlar

Varsayılan md (40px). sm ve xs, Text Input ölçeğiyle eşleşir.

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

Görünümler

default tam alandır. compact, daha yoğun araç çubukları için kenarlığı kaldırır. inline yalnızca metindir.

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

Aranabilir

Uzun listeler için searchable’ı açın. Liste klavyeyle gezilirken arama alanı odakta kalır.

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

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

Devre dışı ve hata

Doğrulama iletisi göstermek için error verin; alan otomatik geçersiz işaretlenir. Devre dışı, gerçek disabled özniteliğidir.

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