Kad Statistik dan Widget KPI
Cipta barisan kad statistik yang memaparkan metrik utama dengan ikon berwarna, penunjuk aliran dan peratus perbandingan menggunakan utiliti grid serta flex.
Kad Statistik dan Widget KPI ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Tujuan dan Penempatan Kad KPI
Kad KPI (Petunjuk Prestasi Utama), yang juga dipanggil kad statistik atau widget metrik, memaparkan nombor peringkat tinggi di bahagian atas papan pemuka. Kad ini memberikan gambaran segera tentang metrik paling penting — hasil, pengguna aktif dan kadar penukaran — tanpa perlu menatal atau menyelidik jadual. Kad ini sentiasa menjadi perkara pertama yang dilihat pengguna pada halaman papan pemuka.
<!-- Stat cards positioned at the top of dashboard main content -->
<main class="flex-1 overflow-y-auto bg-gray-100 p-6">
<!-- KPI cards row -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
<!-- Card 1: Total Revenue -->
<!-- Card 2: Active Users -->
<!-- Card 3: Conversion Rate -->
<!-- Card 4: Open Tickets -->
</div>
<!-- Charts and tables below -->
</main>Struktur Asas Kad Statistik
Setiap kad statistik mempunyai empat elemen: label (nama metrik), nilai (nombor besar), penunjuk aliran (perubahan peratusan) dan ikon pilihan. Letakkan semua elemen ini di dalam kad putih berbucu bulat: rounded-xl bg-white p-6 shadow-sm. Gunakan susun atur lajur fleksibel atau baris fleksibel dalam kad, bergantung pada sama ada ikon berada di sisi atau di atas nilai.
<div class="rounded-xl bg-white p-6 shadow-sm">
<div class="flex items-center justify-between">
<!-- Label -->
<p class="text-sm font-medium text-gray-500">Total Revenue</p>
<!-- Icon -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
<svg class="h-5 w-5 text-blue-600"><!-- currency icon --></svg>
</div>
</div>
<!-- Value -->
<p class="mt-4 text-3xl font-bold tracking-tight text-gray-900">$48,295</p>
<!-- Trend -->
<p class="mt-1 text-sm text-green-600">
<span class="font-semibold">+12.5%</span> vs last month
</p>
</div>Penunjuk Aliran Berkod Warna
Jadikan aliran mudah dikenal pasti sepintas lalu dengan pengekodan warna: hijau untuk perubahan positif dan merah untuk perubahan negatif. Gunakan text-green-600 bersama ikon anak panah ke atas untuk peningkatan dan text-red-500 bersama anak panah ke bawah untuk penurunan. Untuk metrik neutral atau tidak berubah, gunakan text-gray-500. Sentiasa sertakan nombor sebenar bersama peratusan untuk memberikan konteks.
<!-- Positive trend -->
<div class="mt-2 flex items-center gap-1 text-sm text-green-600">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
</svg>
<span class="font-semibold">+12.5%</span>
<span class="text-gray-500">from last month</span>
</div>
<!-- Negative trend -->
<div class="mt-2 flex items-center gap-1 text-sm text-red-500">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
</svg>
<span class="font-semibold">-3.2%</span>
<span class="text-gray-500">from last month</span>
</div>Tema Warna Ikon bagi Setiap Metrik
Tetapkan tema warna ikon yang berbeza kepada setiap kad statistik supaya kad mudah dikenal pasti sepintas lalu. Hasil menggunakan warna biru, pengguna warna ungu, penukaran warna hijau, dan tiket sokongan warna jingga atau merah. Setiap ikon berada dalam bulatan berbucu bulat dengan latar versi cerah warnanya dan isian ikon dalam warna padu. Pengekodan warna ini dikekalkan di mana-mana sahaja metrik tersebut muncul dalam papan pemuka.
<!-- Revenue: blue -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
<svg class="h-5 w-5 text-blue-600"><!-- icon --></svg>
</div>
<!-- Users: purple -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-purple-100">
<svg class="h-5 w-5 text-purple-600"><!-- icon --></svg>
</div>
<!-- Conversion: green -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-green-100">
<svg class="h-5 w-5 text-green-600"><!-- icon --></svg>
</div>
<!-- Tickets: orange -->
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-100">
<svg class="h-5 w-5 text-orange-600"><!-- icon --></svg>
</div>Carta Mini Sparkline dalam Kad Statistik
Menambah carta mini sparkline di bawah nilai metrik memberikan data aliran sepintas lalu tanpa perlu membuka carta penuh. Poligaris SVG ringkas berfungsi sebagai sparkline ringan. Sebagai alternatif, carta bar kecil yang dibina daripada bekas flex gap-0.5 items-end, dengan setiap bar ialah div w-1 yang mempunyai ketinggian berbeza, menghasilkan kesan sparkline bar menggunakan Tailwind sahaja.
<!-- CSS bar sparkline -->
<div class="mt-4">
<div class="flex h-10 items-end gap-0.5">
<div class="w-2 rounded-sm bg-blue-200" style="height: 40%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 55%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 35%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 65%"></div>
<div class="w-2 rounded-sm bg-blue-200" style="height: 80%"></div>
<div class="w-2 rounded-sm bg-blue-400" style="height: 70%"></div>
<div class="w-2 rounded-sm bg-blue-600" style="height: 90%"></div>
</div>
</div>Kad Statistik dengan Bar Kemajuan
Untuk matlamat dan kuota, bar kemajuan di dalam kad statistik menunjukkan secara visual sejauh mana metrik menghampiri sasarannya. Gunakan trek latar kelabu h-2 rounded-full bg-gray-100 dengan bar berisi berwarna di dalamnya. Lebar isian ditetapkan menggunakan peratusan gaya sebaris atau nilai arbitrari Tailwind seperti w-[73%]. Sertakan label matlamat dan teks peratusan di bawah atau di atas bar.
<div class="rounded-xl bg-white p-6 shadow-sm">
<p class="text-sm font-medium text-gray-500">Monthly Goal</p>
<p class="mt-4 text-3xl font-bold text-gray-900">$36,450</p>
<p class="mt-1 text-sm text-gray-500">of $50,000 goal</p>
<!-- Progress bar -->
<div class="mt-4">
<div class="h-2 rounded-full bg-gray-100">
<div class="h-2 w-[73%] rounded-full bg-blue-600"></div>
</div>
<p class="mt-1 text-right text-xs text-gray-400">73% complete</p>
</div>
</div>Grid Kad Statistik Responsif
Kad statistik hendaklah menyesuaikan diri dengan baik pada saiz skrin yang berbeza. Mulakan dengan satu lajur pada peranti mudah alih (grid-cols-1), tukar kepada dua lajur pada skrin sederhana (sm:grid-cols-2), dan kembangkan kepada empat lajur pada skrin ekstra besar (xl:grid-cols-4). Pada tablet dengan dua lajur, kad mungkin kelihatan lebih tinggi — pastikan susun atur kad masih mudah dibaca dalam susunan dua lajur.
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
<!-- On mobile: 1 card per row (full width) -->
<!-- On sm (640px): 2 cards per row -->
<!-- On xl (1280px): 4 cards per row -->
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Revenue --></div>
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Users --></div>
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Conversion --></div>
<div class="rounded-xl bg-white p-6 shadow-sm"><!-- Tickets --></div>
</div>Kad Statistik dengan Tempoh Perbandingan
Benarkan pengguna memberikan konteks kepada metrik dengan memaparkan pemilih tempoh perbandingan di dalam atau berdekatan kad statistik. Kawalan bersegmen berbentuk pil kecil membolehkan pengguna bertukar antara Hari ini, 7H, 30H dan Sepanjang masa. Ciri ini menambah interaktiviti tanpa memenuhi kad — pemilih boleh menjadi kawalan dikongsi di atas semua kad yang mempengaruhi keseluruhan baris serentak.
<!-- Period selector above stat cards -->
<div class="mb-6 flex items-center justify-between">
<h2 class="text-lg font-bold text-gray-900">Overview</h2>
<div class="flex rounded-lg border border-gray-200 bg-white">
<button class="rounded-l-lg border-r border-gray-200 px-3 py-1.5 text-xs
font-medium text-gray-500 hover:bg-gray-50">Today</button>
<button class="border-r border-gray-200 px-3 py-1.5 text-xs
font-medium text-blue-600 bg-blue-50">7D</button>
<button class="border-r border-gray-200 px-3 py-1.5 text-xs
font-medium text-gray-500 hover:bg-gray-50">30D</button>
<button class="rounded-r-lg px-3 py-1.5 text-xs
font-medium text-gray-500 hover:bg-gray-50">All time</button>
</div>
</div>Rangka Pemuatan untuk Kad Statistik
Semasa data KPI dimuatkan daripada API, paparkan ruang letak rangka untuk mengelakkan anjakan susun atur dan memaklumkan bahawa kandungan sedang dimuatkan. Gantikan nombor dan label dengan blok kelabu beranimasi menggunakan animate-pulse Tailwind. Elemen rangka menggunakan rounded bg-gray-200 dengan ketinggian tetap untuk meniru dimensi susun atur kad sebenar.
<!-- Skeleton stat card -->
<div class="rounded-xl bg-white p-6 shadow-sm animate-pulse">
<div class="flex items-center justify-between">
<div class="h-4 w-24 rounded bg-gray-200"></div>
<div class="h-10 w-10 rounded-full bg-gray-200"></div>
</div>
<div class="mt-4 h-8 w-32 rounded bg-gray-200"></div>
<div class="mt-2 h-3 w-28 rounded bg-gray-200"></div>
</div>Kad Statistik Boleh Diklik
Jadikan kad statistik boleh diklik untuk menavigasi ke paparan terperinci bagi metrik tersebut. Balut kad dalam sauh atau tambahkan pautan halus Lihat butiran di bahagian bawah. Gunakan group pada bekas kad dan group-hover:underline pada pautan butiran untuk memaparkan pautan hanya apabila dituding — pola pendedahan berperingkat yang kemas dan tidak memenuhi kad ketika tidak digunakan.
<a href="/analytics/revenue"
class="group block rounded-xl bg-white p-6 shadow-sm
transition hover:shadow-md">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Total Revenue</p>
<!-- Icon -->
</div>
<p class="mt-4 text-3xl font-bold text-gray-900">$48,295</p>
<p class="mt-1 text-sm text-green-600 font-semibold">+12.5%</p>
<!-- Hover-revealed detail link -->
<p class="mt-3 text-xs text-blue-600 opacity-0 transition group-hover:opacity-100">
View full report →
</p>
</a>Kad Statistik Mod Gelap
Sesuaikan kad statistik untuk mod gelap dengan menterbalikkan warna permukaan dan teks. Latar kad berubah daripada bg-white kepada dark:bg-gray-800, teks nilai daripada text-gray-900 kepada dark:text-white, dan bekas ikon daripada varian cerah kepada varian gelap. Warna aliran (hijau/merah) biasanya kelihatan baik dalam kedua-dua mod, tetapi sahkan nisbah kontras kerana hijau cerah pada latar gelap mungkin tidak memenuhi piawaian WCAG.
<div class="rounded-xl bg-white p-6 shadow-sm dark:bg-gray-800">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Revenue</p>
<p class="mt-4 text-3xl font-bold text-gray-900 dark:text-white">$48,295</p>
<!-- Icon container -->
<div class="flex h-10 w-10 items-center justify-center
rounded-full bg-blue-100 dark:bg-blue-900">
<svg class="h-5 w-5 text-blue-600 dark:text-blue-400"><!-- icon --></svg>
</div>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini, anda telah mempelajari: membina kad statistik KPI dengan ikon, penunjuk aliran dan pengekodan warna, menambah bar kemajuan dan sparkline untuk visualisasi metrik yang lebih kaya, serta mencipta pemuat rangka dengan animate-pulse untuk keadaan pemuatan yang lancar. Seterusnya, kita akan membina jadual data dan widget ruang letak carta.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Kad Statistik dan Widget KPI” percuma?
Ya — teks penuh “Kad Statistik dan Widget KPI” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Kad Statistik dan Widget KPI”?
Cipta barisan kad statistik yang memaparkan metrik utama dengan ikon berwarna, penunjuk aliran dan peratus perbandingan menggunakan utiliti grid serta flex. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Kad Statistik dan Widget KPI” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Rangka Papan Pemuka dan Bar Sisi
- Bar Atas dan Denai Navigasi
- Kad Statistik dan Widget KPI
- Jadual Data dan Pemegang Tempat Carta