İstatistik kartları
Tek bir sayıyı etiketi, ikonu ve önceki döneme göre değişimiyle öne çıkarır. Pano özetlerinde yan yana dizilerek kullanılır.
Temel kullanım
label ve value zorunludur. Değer olduğu gibi yazılır; binlik ayırıcı ya da birim gerekiyorsa değeri biçimlendirerek verin.
<acun:stat-card label="Toplam müşteri" value="4.812" />| Prop | Değerler |
|---|---|
label | Sayının açıklaması |
value | Gösterilen değer |
Değişim
change yüzde değişimi gösterir: 0 ve üstü yeşil ve yukarı oklu, negatif değerler kırmızı ve aşağı oklu çizilir. Sayı Türkçe biçimde, en fazla bir ondalıkla yazılır; change-label yanına kısa bir açıklama ekler.
<div class="grid gap-4 sm:grid-cols-3">
<acun:stat-card label="Bu ay sipariş" value="3.106" :change="12.5" change-label="geçen aya göre" />
<acun:stat-card label="İade" value="214" :change="-4" change-label="geçen aya göre" />
<acun:stat-card label="Açık talep" value="38" :change="0" />
</div>| Prop | Değerler |
|---|---|
change | Yüzde; 0 ve üstü yeşil, negatif kırmızı |
change-label | Değişimin yanındaki metin |
İkon ve renkler
icon sol üstte renkli bir kutu içinde gösterilir. Kutunun rengi color ile seçilir, varsayılanı brand'dir; color yalnızca ikon kutusunu etkiler.
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
<acun:stat-card label="Toplam müşteri" value="4.812" icon="users" />
<acun:stat-card label="Teslim" value="3.106" icon="truck" color="success" />
<acun:stat-card label="İade" value="214" icon="exclamation-triangle" color="warning" />
<acun:stat-card label="İptal" value="12" icon="x-circle" color="danger" />
<acun:stat-card label="Açık talep" value="38" icon="ticket" color="info" />
</div>| Prop | Değerler |
|---|---|
icon | acun:icon adı |
color | brand | success | warning | danger | info |
Ek içerik
actions slot'u kartın sağ üst köşesine yerleşir; ikon olsun ya da olmasın yeri değişmez. Varsayılan slot kartın en altına eklenir; ilerleme çubuğu ya da küçük bir grafik için kullanın.
<acun:stat-card label="Aylık hedef" value="3.106 / 3.400" icon="flag">
<acun:slot:actions>
<acun:badge variant="info">Eylül</acun:badge>
</acun:slot:actions>
<acun:progress :value="91" size="sm" label="Aylık hedefin yüzde 91'i" />
</acun:stat-card>| Prop | Değerler |
|---|---|
actions | Slot; sağ üst |
varsayılan slot | Kartın altı |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
label | — | Zorunlu; sayının açıklaması |
value | — | Zorunlu; gösterilen değer |
change | null | Yüzde değişim; negatifse kırmızı |
change-label | null | Değişimin yanındaki metin |
icon | null | acun:icon adı |
color | primary | primary · secondary · success · danger · warning · info · dark (ikon kutusu; brand = primary) |