nili/ui
enfaartr
Tüm bileşenler

Tag

Genel görünüm
10 export5 varyant ekseni15 prop4 dosya
import { Tag, TagGroup } 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.

Görünümler

İki işleyiş — beyaz üzerinde stroke ya da dolu bir çip üzerinde gray.

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

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

Durumlar

selected uygulanmış bir etiketi imler ve etiket seçilebilirse aria-pressed ekler. disabled onu soluklaştırır ve sekme sırasından çıkarır.

durağan
VarsayılanSeçiliDisabledSeçili
seçilebilir (deneyin)
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>
    </>
  )
}

Öndeki yuva

startAdornment Figma’daki her Type’ı tek bir prop’ta toplar — bir simge, bir avatar, bir bayrak, bir marka işareti. Bir enum olsalardı birbirini dışlarlardı ve yedinci bir tür yeni bir kitaplık sürümü isterdi.

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

Kaldırılabilir

onDismiss kaldırma düğmesini gösterir. Yanında dismissLabel zorunludur — bir ✕’in erişilebilir adı yoktur ve ekran okuyucunun duyacağı tek şey “düğme” olur.

TasarımMühendislikAraştırmaPazarlama
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>
  )
}