Tag

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Tag } from '@bigbang/ui';

Kaynak

Tag.tsx

Storybook

Tag · Playground

Tag, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

import { Tag } from '@bigbang/ui';

<Tag.Group aria-label="Etiketler">
  <Tag onRemove={() => remove('tasarim')}>Tasarım</Tag>
  <Tag onRemove={() => remove('gelistirme')}>Geliştirme</Tag>
</Tag.Group>;

Özellikler

tone

Açıklama

Etiketin neyi temsil ettiği. Varsayılan nötrdür; diğer tonlar pastel bir zemin, kenarlık ve metin verir. violet, teal ve pink durum anlamı taşımayan kategori renkleridir.

Tür

'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'violet' | 'teal' | 'pink'

Varsayılan

'neutral'

size

Açıklama

Yükseklik ve yatay iç boşluk: 24 ve 32 px.

Tür

'sm' | 'md'

Varsayılan

'md'

icon

Açıklama

Etiketten önce gelen, süs amaçlı simge öğesi (12 ya da 16 px). Ekran okuyucular atlar; anlamı etiket taşır.

Tür

ReactElement

disabled

Açıklama

Kaldırılabilir ya da seçilebilir etiketin etkileşimini kapatır ve soluklaştırır. Durağan etiket yalnızca soluklaşır.

Tür

boolean

Varsayılan

false

className

Açıklama

Yalnızca yerleşim için: kenar boşlukları ve hizalama. Renk ya da boyutu değiştirmek için kullanmayın.

Tür

string

childrenZorunlu

Açıklama

Etiket metni. Bir ya da iki sözcük olsun; kaldır düğmesinin adını da bu metin oluşturur.

Tür

string

onRemove

Açıklama

Etiketin sonuna kaldır düğmesi ekler; tıklama, Enter, Boşluk, Backspace ya da Delete ile etiket kaldırılınca çağrılır. Etiketi bu işlevde listenizden çıkarın. Etiket hem kaldırılabilir hem seçilebilir olamaz.

Tür

() => void

removeLabel

Açıklama

Kaldır düğmesinin erişilebilir adı. Verilmezse kitaplık metni ui.tag.remove Provider'ın dilinde kullanılır ("{label} kaldır" ya da "Remove {label}").

Tür

string

selected

Açıklama

Etiketi açma-kapama düğmesi yapar ve durumunu belirler (kontrollü). Seçili etiket marka renklerini alır ve onay işareti gösterir. Etiket hem seçilebilir hem kaldırılabilir olamaz.

Tür

boolean

defaultSelected

Açıklama

Kontrol etmediğinizde seçilebilir etiketin başlangıç durumu.

Tür

boolean

Varsayılan

false

onSelectedChange

Açıklama

Kullanıcı etiketi değiştirdiğinde yeni durumla çağrılır.

Tür

(selected: boolean) => void

onRemove ile selected, defaultSelected, onSelectedChange birlikte verilemez; tür tanımı bunu engeller.

Parçalar

Parça	Öğe	Özellikler
Tag.Icon	<span>	children: simge öğesi. Süs amaçlıdır (aria-hidden).
Tag.Label	<span>	children: metin. Taşarsa kesilir.
Tag.Remove	<button>	label, onRemove, removeLabel, disabled. Backspace ve Delete de kaldırır.
Tag.Group	<ul role="list">	aria-label (zorunlu), onEmpty, className. Kaldırma sonrası odağı yönetir.

Veri öznitelikleri

• data-component="tag", data-tone, data-size, data-disabled: etiket öğesinde.
• data-component="tag-group": grup öğesinde.
• data-part: icon, label, mark, remove.

Kaldırma ve odak

Listeyi kendi durumunuzda tutun ve her etikete kararlı bir key verin. Odak yönetimi etiketlerin DOM’dan çıkmasına bakar; liste durumu hemen ya da bir sonraki işlemde değişse de çalışır.

const [items, setItems] = useState(['Tasarım', 'Geliştirme']);

<Tag.Group aria-label="Etiketler" onEmpty={() => addButtonRef.current?.focus()}>
  {items.map((item) => (
    <Tag key={item} onRemove={() => setItems((current) => current.filter((name) => name !== item))}>
      {item}
    </Tag>
  ))}
</Tag.Group>;