StatCard

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

StatCard.tsx

Storybook

StatCard · Playground

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

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

<StatCard
  label="Toplam öğe"
  value="1.280"
  delta={{ value: '8 %', direction: 'up' }}
  period="geçen aya göre"
/>;

Parça prop tipleri de dışa açılır: StatCardLabelProps, StatCardValueProps, StatCardDeltaProps, StatCardPeriodProps, StatCardTrendProps, StatCardInfoProps.

Özellikler

label

Açıklama

Ölçünün adı, örneğin "Toplam öğe". Grubu adlandırır. children ile özel yerleşim kurarken vermeyin.

Tür

string

value

Açıklama

Uygulamanın Intl ile biçimlendirdiği değer; StatCard sayıyı biçimlendirmez. null, undefined ya da boş metin çizgi ve noDataLabel gösterir.

Tür

ReactNode

delta

Açıklama

Önceki döneme göre değişim: biçimlendirilmiş değer, yön ve isteğe bağlı anlam (sentiment).

Tür

StatCardDelta

period

Açıklama

Değişimin neye göre ölçüldüğü, örneğin "geçen aya göre".

Tür

string

trend

Açıklama

Küçük bir grafik ya da sparkline. Çocuğunda role="img" veya aria-label yoksa süstür ve ekran okuyucudan gizlenir.

Tür

ReactNode

info

Açıklama

Değerin altında yardım metni, örneğin sayının nasıl hesaplandığı.

Tür

ReactNode

loading

Açıklama

Değer ve değişim için yer tutucu gösterir, kökü aria-busy yapar ve loadingLabel'ı okutur.

Tür

boolean

Varsayılan

false

hidden

Açıklama

Gizlilik modu: değer •••• olarak görünür, ekran okuyucu hiddenLabel'ı okur.

Tür

boolean

Varsayılan

false

variant

Açıklama

Kartın yüzeyi, Card'a iletilir.

Tür

'outlined' | 'elevated' | 'filled'

Varsayılan

'outlined'

loadingLabel

Açıklama

Yüklenirken okunan metin. Varsayılan kütüphane metnidir: "Yükleniyor" ya da "Loading".

Tür

string

hiddenLabel

Açıklama

Gizli değerin yerine okunan metin. Varsayılan: "Gizlendi" ya da "Hidden".

Tür

string

noDataLabel

Açıklama

Değer yokken çizginin yanında okunan gerekçe. Varsayılan: "bilgi yok" ya da "no information".

Tür

string

className

Açıklama

Yalnızca yerleşim için: kenar boşluğu, genişlik ve ızgara konumu. Renk ya da iç boşluk değiştirmek için kullanmayın.

Tür

string

children

Açıklama

StatCard.Label, Value, Delta, Period, Trend ve Info ile özel yerleşim. Verilirse özelliklerden kurulan yerleşimin yerine geçer.

Tür

ReactNode

Bunların dışında yerel öznitelikler (id, aria-*) kök öğeye iletilir. delta nesnesi value, direction, sentiment ve label alanlarını taşır.

Parçalar

Yaygın durum için özellikleri, özel yerleşim için parçaları kullanın. children verirseniz özelliklerden kurulan yerleşim yerine geçer; loading ve hidden parçalara kökten iletilir.

Parça	Öğe	Özellikler
StatCard.Label	<p>	Yerel öznitelikler. Grubun adıdır; id kök tarafından verilir.
StatCard.Value	<div>	Yerel öznitelikler. Yüklenirken, gizliyken ve değer yokken kendi durumunu gösterir.
StatCard.Delta	<span>	value, direction, sentiment, label.
StatCard.Period	<span>	Yerel öznitelikler.
StatCard.Trend	<div>	Yerel öznitelikler. Etiketsiz içerik aria-hidden olur.
StatCard.Info	<p>	Yerel öznitelikler.

Veri öznitelikleri

• data-stat-card: kök öğede (kök aynı zamanda Card’ın data-component="card" ve data-variant özniteliklerini taşır).
• data-part: label, value, delta, period, trend, info.
• data-direction, data-sentiment: delta parçasında.

Özel yerleşim

<StatCard>
  <StatCard.Label>Toplam öğe</StatCard.Label>
  <StatCard.Value>1.280</StatCard.Value>
  <StatCard.Delta value="8 %" direction="up" />
  <StatCard.Period>geçen aya göre</StatCard.Period>
</StatCard>