Tag

Ne zaman kullanılır

Tag, bir öğeyi kısa bir sözcükle sınıflandırır ya da bir seçimi gösterir. Kategori etiketleri, uygulanan filtreler ve alıcı listeleri için kullanın. Kullanıcı etiketi kaldırabiliyorsa onRemove, bir filtreyi açıp kapatıyorsa selected ekleyin.

Ne zaman kullanılmaz

• Bir durumu bildirmek için: Taslak, etkin, başarısız gibi durumlar için StatusBadge ya da Badge kullanın; Tag kullanıcının atadığı ya da seçtiği bir değeri gösterir.
• Bir sayıyı göstermek için: Okunmamış sayısı gibi küçük sayaçlar için Badge kullanın.
• Bir eylem başlatmak için: Tag işlem yapmaz. İşlem için Button kullanın.
• Uzun metin için: Etiket bir ya da iki sözcük olmalı; uzun metin tek satırda kesilir.

Anatomi

1. Kök: 1 px kenarlık, saydam zemin ve 6 px (radius-sm) köşe.
2. Seçim işareti (yalnızca seçilebilir): seçilince beliren onay işareti.
3. Simge (Tag.Icon): isteğe bağlı, süs amaçlı, 12 ya da 16 px.
4. Etiket (Tag.Label): 14 px yarı kalın metin; kapsayıcıdan genişse kesilir.
5. Kaldır (Tag.Remove): yalnızca kaldırılabilir etikette, 24 px hedefli buton.
6. Grup (Tag.Group): etiketleri adlandırılmış bir liste (role="list") olarak toplar.

Davranış

• Durağan etiket üzerine gelince, tıklayınca değişmez ve sekme sırasına girmez.
• Kaldırılabilir etikette yalnızca kaldır düğmesi odak alır; Enter, Boşluk, tıklama, Backspace ve Delete etiketi kaldırır.
• Seçilebilir etiketin tamamı bir düğmedir; Enter ve Boşluk durumu değiştirir.
• Etiket hem seçilebilir hem kaldırılabilir olamaz; tür tipi bunu engeller.
• Tag.Group içinde bir etiket kaldırılınca odak sonraki etiketin düğmesine, yoksa öncekine, yoksa onEmpty hedefine geçer. Ok tuşlarıyla gezinme yoktur; her kaldır düğmesi ayrı bir sekme durağıdır.
• Gruba eklenen etiket 4 px yükselerek belirir. Kaldırma anında olur; çıkış animasyonu yoktur.
• Seçilebilir etikette onay işareti için yer baştan ayrılır; seçince etiketin genişliği değişmez.

Yönergeler

Etiket kısa olsun

Bir ya da iki sözcük yazın. Cümle ve açıklama etiket değildir.

Tasarım

YapınKısa, tek kavram.

Bu etiket gereğinden fazla uzun bir açıklama

YapmayınCümle: kesilir ve okunmaz.

Kaldırılabilir etiketleri grupla

Kaldırılabilir etiketleri Tag.Group içine koyun; liste adlandırılır ve odak yönetimi çalışır.

TasarımGeliştirme

YapınGrup adlandırılmış ve odak yönetimi var.

TasarımGeliştirme

YapmayınDağınık etiketler: liste olarak okunmaz.

Anlamı metin taşısın

Ton yalnızca vurgular. Renk tek başına bir anlam taşımasın.

Araştırma

YapınMetin anlamı söylüyor; ton destekliyor.

YapmayınEtiketsiz renk: yalnızca ton anlamı taşıyor.

Ton az kullanılsın

Aynı satırdaki etiketler çoğunlukla nötr olsun; ton gerçek bir ayrımı göstersin.

TasarımGeliştirmeAraştırma

YapınNötr etiketler, bir vurgu.

TasarımGeliştirmeAraştırma

YapmayınHer etiket farklı renkte: ayrım anlamını yitiriyor.

İçerik

• Etiketi cümle düzeninde, bir ya da iki sözcükle yazın: “Tasarım”, “Geliştirme”.
• Nokta ya da iki nokta koymayın.
• Kaldır düğmesinin adını yazmayın; kitaplık “Tasarım kaldır” metnini etiketten üretir.
• Aynı grupta aynı türden etiketleri bir arada tutun: hepsi kategori ya da hepsi alıcı.

İlgili bileşenler

• Badge: Durum ve sayaç göstermek için.
• StatusBadge: Sabit bir durum sözlüğünden durum göstermek için.
• Button: Bir işlem başlatmak için.