StatCard

Ne zaman kullanılır

StatCard, tek bir ölçünün güncel değerini ve önceki dönemle farkını bir bakışta gösterir: panonun üstündeki özet kutuları, bir raporun başlık sayıları.

Ne zaman kullanılmaz

• Birden çok ölçü için: Karşılaştırılacak çok sayıda değer için Table ya da DataTable kullanın.
• Ayrıntılı grafik için: Eksen, etiket ve karşılaştırma gerektiren grafikler için Chart kullanın; StatCard yalnızca küçük bir eğilim çizgisi alır.
• Bilgi ve işlem karışımı için: Serbest içerik gruplamak için Card kullanın.
• Anahtar-değer ayrıntıları için: Bir kaydın alanları için DescriptionList kullanın.

Anatomi

1. Kök: Card üzerine kurulu yüzey; etiketi varsa adlandırılmış bir grup (role="group").
2. Etiket (StatCard.Label): ölçünün adı; grubun adıdır.
3. Değer (StatCard.Value): 24 px yarı kalın, tablo rakamlı sayı.
4. Değişim (StatCard.Delta): ok, ekran okuyucu kelimesi ve biçimlendirilmiş değer.
5. Dönem (StatCard.Period): değişimin neye göre ölçüldüğü.
6. Eğilim (StatCard.Trend): küçük grafik yuvası, isteğe bağlı.
7. Bilgi (StatCard.Info): yardım metni, isteğe bağlı.

Davranış

• StatCard durağandır: üzerine gelince değişmez ve sekme sırasına girmez.
• Değer değişince yeni değer kısa bir geçişle belirir; sayı saymaz ya da kaymaz.
• Yüklenirken değer ve değişim yer tutucu olur; etiket görünür kalır, eğilim gizlenir.
• Değer yoksa çizgi ve gerekçe görünür; kutu boş bırakılmaz.
• Uzun değer satır kırar; kutu içeriğe göre yükselir.

Yönergeler

Anlamı renge değil kelimeye bağlayın

Değişimin yönü ok ve kelimeyle verilir; renk yalnızca anlamı pekiştirir.

Toplam öğe

1.280

artış 8 %geçen aya göre

YapınOk ve kelime yönü verir; renk olumlu ya da olumsuzu gösterir.

+8 %

YapmayınDeğişim yalnızca renkli bir sayı olarak veriliyor.

Azalmanın iyi olduğu ölçüde anlamı ayarlayın

Yön ile anlam ayrıdır. Azalması iyi olan bir ölçüde sentiment verin.

Bekleyen öğe

18

azalış 5 %geçen aya göre

YapınAzalış olumlu: yön aşağı, anlam olumlu.

Bekleyen öğe

18

azalış 5 %geçen aya göre

YapmayınAzalış olumlu olduğu halde kırmızı gösteriliyor.

Veri yoksa çizgi gösterin

Boş bırakmayın ve sıfır yazmayın; sıfır gerçek bir değerdir.

Etkin kullanıcı

—bilgi yok

YapınÇizgi ve gerekçe: ölçüm yok.

Etkin kullanıcı

0

YapmayınVeri yokken 0 yazılıyor; gerçek sıfırdan ayrılmıyor.

İçerik

• Etiketi bir isim öbeği olarak, cümle düzeninde yazın: “Toplam öğe”, “Tamamlanma oranı”.
• Değeri uygulamanız Intl ile biçimlendirsin; birimi değere ekleyin (“76 %”).
• Dönemi göreli yazın: “geçen aya göre”.
• info metnini tek cümle tutun.

İlgili bileşenler

• Card: StatCard’ın üzerine kurulduğu yüzey.
• DescriptionList: Bir kaydın alanlarını anahtar-değer olarak gösterir.
• Grid: Kutuları ızgaraya dizmek için.