KPI kartları

Flexbox ile KPI kartları ızgarası kurarsın.

KPI kartları flex ile yan yana

Satış panelinde en üstte özet ölçümler gösteririz: günlük ciro, yeni müşteri sayısı, sepet ortalaması gibi. Bunlara KPI kartları denir ve genellikle yan yana dizilirler.

Yan yana dizme işi için en pratik yöntem display: flex. Kapsayıcıya flex verdikten sonra gap ile kartlar arasına boşluk koyar, flex-wrap: wrap ile daraldıklarında alt satıra geçmelerini sağlarız.

Özel değişkenler ile tema renkleri

Birinci derste --bg ve --card-bg değişkenlerini tanımlamıştık. Şimdi temayı kullanıyoruz: kart arka planını var(--card-bg) ile çağırarak veririz. Böylece temayı tek yerden değiştirebiliriz.

İleride tema rengini değiştirmek istersen yalnızca :root bölümünü güncellersin; kartlar, başlıklar ve tablo otomatik olarak yeni rengi alır.

KPI kartı tasarımı

Her KPI kartı, bir başlık (ör. 'Günlük Ciro'), büyük bir değer ve küçük bir değişim etiketi içerir. Kart arka planını var(--card-bg) ile beyaz yaparız; iç boşluk veririz; köşeleri yuvarlatırız.

Bu derste yalnızca arka plan ve iç boşluğu ekliyoruz; gölge ve köşe yuvarlatma son derste gelecek.

Uygulama KPI kartlarını ekle: .kpi-list ve .kpi-card

Stil sayfasına bir .kpi-list bölümü ekle. display: flex, flex-wrap: wrap ve gap: 16px bildirimlerini ver. Sonra bir .kpi-card bölümü ekle; arka planını var(--card-bg) ile ver ve padding: 16px ekle.

Örnek çözümü göster

/* Satış Paneli stil sayfası */

:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
}

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}

.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }

.kpi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.kpi-card {
  background: var(--card-bg);
  padding: 16px;
}

Kendini test et

Kapsayıcı daralınca kartların alt satıra geçmesi için flex-wrap değerini ne vermeliyiz?
- nowrap
- wrap-reverse
- wrap
- inherit
Cevabı göster

wrap — Doğru. wrap kartları otomatik olarak alt satıra geçirir.

Kartlar arasına 16 piksel boşluk koy

.kpi-list {
  display: flex;
  flex-wrap: wrap;
  ____;
}

Cevabı göster

.kpi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Bildirimleri görevleriyle eşleştir

display: flex

esnek kapsayıcı
flex-wrap

kartları alt satıra indir
gap

öğeler arası boşluk
var()

değişkeni çağır

Sıradaki ders: Veri tablosu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler