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