StatusBadge

Ne zaman kullanılır

StatusBadge, bir kaydın ya da sürecin durumunu gösterir: tablo satırında, kart alt bölümünde, ayrıntı sayfasının başlığında. Durum, ortak sözlükten gelir; böylece aynı durum bütün ürünlerde aynı ton, simge ve metinle görünür.

Ne zaman kullanılmaz

• Serbest bir değer için: Kullanıcının yazdığı ya da seçtiği değerler için Tag kullanın.
• Sayaç için: “3 yeni” gibi sayılar için Badge kullanın.
• Sözlükte karşılığı olmayan, tek seferlik bir durum için: Önce sözlüğe ekleyin; sayfada Badge ile ton seçmeyin.
• Bir işlem başlatmak için: StatusBadge etkileşimsizdir. İşlem için Button kullanın.

Anatomi

1. Kök: Badge ile aynı kabuk; 1 px kenarlık, tam yuvarlak köşe.
2. Simge: sözlükten gelir, 12 px, süs amaçlıdır.
3. Metin: sözlükten gelir ya da label ile değiştirilir; bir ya da iki sözcük.
4. Canlı bölge (isteğe bağlı): announce ile eklenen, görünmeyen kibar duyuru alanı.

Davranış

• Durum yalnızca status ile belirlenir. Ton, simge ve metin sözlükten okunur; sayfa ton vermez.
• Rozet durağandır: üzerine gelince, tıklayınca değişmez ve sekme sırasına girmez.
• Durum değişince rozet yeniden oluşturulur ve motion.reveal ile yumuşakça belirir. Azaltılmış harekette yalnızca çok kısa bir solma kalır.
• announce açıksa metin görünmeyen bir role="status" alanına yazılır; ekran okuyucu değişikliği kibarca duyurur. İlk gösterimde duyuru yapılmaz.
• Sözlükte olmayan kod nötr tonda, simgesiz ve ham kodla gösterilir; geliştirme sırasında her kod için konsolda bir kez uyarılır.
• Varyant yalnızca vurguyu değiştirir: subtle ya da bold. Katalogdaki solid adı burada bold olarak kullanılır, Badge ile tutarlı olması için.

Yönergeler

Sözlükten durum seçin

Durum status ile verilir; ton ve simge sözlükten gelir.

Onaylandı

YapınDurum anahtarı verildi; görünüm sözlükte.

onaylanmis-gibi

YapmayınSözlükte olmayan kod: nötr ve ham metin.

Bold tek durum içindir

Bir listede yalnızca dikkat gerektiren tek durumu vurgulayın.

TamamlandıBeklemedeBaşarısız

YapınSatırların çoğu subtle; bir durum bold.

TamamlandıBeklemedeBaşarısız

YapmayınHepsi bold: vurgu anlamını yitiriyor.

Metin her zaman görünsün

Durumu yalnızca renk ya da simge taşımasın.

Başarısız

YapınSimge ve metin birlikte.

YapmayınMetin yok: yalnızca renk ve simge anlatıyor.

Özel metin kısa kalsın

label ile bir terim değiştirebilirsiniz; cümle yazmayın.

Yayında

YapınKısa ürün terimi.

Bu kayıt şu anda herkese açık

YapmayınCümle: rozet taşıyor.

İçerik

• Metinler sözlükte tanımlıdır; cümle düzeninde, bir ya da iki sözcüktür: “Taslak”, “İnceleniyor”.
• label ile yeniden adlandırırken de bir ya da iki sözcük kullanın.
• Aynı durum için tüm ekranlarda aynı sözcüğü kullanın; sözlük bunun tek kaynağıdır.
• Yeni durum gerekiyorsa sözlüğe ton, simge ve iki dilde metinle ekleyin.

İlgili bileşenler

• Badge: Sözlüğe bağlı olmayan durum ve sayaç göstergesi; StatusBadge bunun üzerine kuruludur.
• Tag: Kullanıcının atadığı etiketler ve filtreler için.
• Table: Durumları satır satır göstermek için.