nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Tag

نمای کلی
۱۰ اکسپورت۵ محور واریانت۱۵ پراپ۴ فایل
import { Tag, TagGroup } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

ظاهرها

دو پرداخت — stroke روی سفید، یا gray روی چیپ پرشده.

StrokeGray
import { Tag } from "@nili/ui"

export function Example() {
  return (
    <>
      <Tag appearance="stroke">Stroke</Tag>
      <Tag appearance="gray">Gray</Tag>
    </>
  )
}

حالت‌ها

selected یعنی برچسب اعمال شده و وقتی برچسب انتخاب‌شدنی باشد aria-pressed هم اضافه می‌کند. disabled آن را خاکستری و از ترتیب تب خارج می‌کند.

ایستا
پیش‌فرضانتخاب‌شدهDisabledانتخاب‌شده
انتخاب‌شدنی (امتحان کنید)
import { Tag } from "@nili/ui"

export function Example() {
  const [selected, setSelected] = useState<string[]>([])

  return (
    <>
      <Tag
        selected={selected.includes("design")}
        onSelect={() => toggle("design")}
      >
        Design
      </Tag>
      <Tag disabled>{t('states.disabled')}</Tag>
    </>
  )
}

اسلات پیشرو

startAdornment همه‌ی Typeهای فیگما را در یک پراپ جمع می‌کند — آیکون، آواتار، پرچم، نشان برند. اگر enum بود این‌ها ناسازگار می‌شدند و نوع هفتم یک انتشار تازه‌ی کتابخانه می‌خواست.

IconAda LovelaceIranWith sublabel24
import { Tag, Avatar, CountryFlag, Icon } from "@nili/ui"
import { RiPriceTag3Line } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Tag startAdornment={<Icon icon={RiPriceTag3Line} />}>
            {t('slot.icon')}
          </Tag>
      <Tag startAdornment={<Avatar size="3xs" name="Ada Lovelace" tone="blue" />}>
        Ada Lovelace
      </Tag>
      <Tag startAdornment={<CountryFlag code="ir" size="xs" />}>
            {t('slot.iran')}
          </Tag>
      <Tag sublabel="24">{t('slot.withSublabel')}</Tag>
    </>
  )
}

قابل‌حذف

onDismiss دکمه‌ی حذف را نشان می‌دهد. dismissLabel همراهش الزامی است — یک ✕ نام دسترس‌پذیری ندارد و تمام چیزی که صفحه‌خوان می‌گیرد «دکمه» است.

طراحیمهندسیپژوهشبازاریابی
import { Tag, TagGroup } from "@nili/ui"

export function Example() {
  const [tags, setTags] = useState(["Design", "Engineering"])

  return (
    <TagGroup label={t('group.filters')}>
      {tags.map((tag) => (
        <Tag
          key={tag}
          onDismiss={() => setTags((c) => c.filter((t) => t !== tag))}
          dismissLabel={`Remove ${tag}`}
        >
          {tag}
        </Tag>
      ))}
    </TagGroup>
  )
}