تخطَّ إلى المحتوى

ابنِ هيكل لوحة مؤشرات أداء حية

مبتدئ~12 د0/4 خطوات

ابنِ هيكل لوحة مؤشرات أداء حية

كل لوحة بيانات رائعة تبدأ من العمود الفقري نفسه: شبكة أنيقة من بطاقات مؤشرات الأداء (KPI) تُبرز الأرقام المهمة بلمحة واحدة. في هذا الدرس ستبني ذلك الهيكل — من النوع الذي تغذّيه واجهة API بمقاييس فورية.

ستنسّق شبكة متجاوبة من البطاقات، تعرض كل واحدة منها اسم المقياس، وقيمة كبيرة، ومؤشر اتجاه. وسنصمّمها كما لو أن مصدر بيانات حيّاً يدفع أرقاماً جديدة كل بضع ثوانٍ.

فكّر كمحلل بيانات: الهدف هو قابلية قراءة فورية. ينبغي أن يستوعب صانع القرار حالة العمل في ثانيتين. هيا نبنِ الإطار الذي يجعل ذلك ممكناً.

التعليمات

1

أضف ترويسة تحتوي على h1 بعنوان "مقاييس مباشرة" ليعرف المستخدمون أن اللوحة تتغذى من API.

تلميح: استخدم: `<h1 class="text-3xl font-bold">مقاييس مباشرة</h1>` داخل `<header>`.

أين أكتب هذا؟

<!-- ابنِ هيكل لوحة مؤشرات الأداء هنا -->

اكتبه في السطر 11 — أسفل هذا التعليق، بعد الكود الذي أضفته بالفعل.

2

أنشئ حاوية شبكة متجاوبة لبطاقات KPI باستخدام فئة grid.

3

أضف بطاقات KPI كصناديق منسّقة، من بينها بطاقة "إجمالي الإيرادات".

4

امنح كل بطاقة خلفية تشبه البطاقات باستخدام الفئة bg-gray-800.

الكود الخاص بك

html
13 أسطر
1
2
3
4
5
6
7
8
9
10
11
12
13

معاينة مباشرة

معاينة مباشرة