فصل 24 از 27 درس 2 از 2

طراحی Dashboard پروژه‌محور

KPI Card و Chart Container

بخشی از آموزش جامع Tailwind CSS

محتوای درس KPI Card و Chart Container

KPI Card و Chart Container را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Dashboard باید اطلاعات مهم را با سلسله‌مراتب روشن نشان دهد. Sidebar در دسکتاپ فضای ثابت می‌گیرد، در موبایل به Drawer تبدیل می‌شود و KPI باید عنوان، مقدار، بازه زمانی و جهت تغییر را شفاف نمایش دهد.

روش پیاده‌سازی

  1. Shell اصلی را Mobile-First طراحی کنید.
  2. Header Sticky و Sidebar را بدون ایجاد Scroll تو در تو تنظیم کنید.
  3. KPIها و Chart Container را با Grid واکنش‌گرا بچینید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
  <article class="rounded-2xl bg-white p-5 shadow-sm">
    <p class="text-sm text-slate-500">فروش امروز</p>
    <strong class="mt-2 block text-3xl font-black">۱۲۵M</strong>
    <span class="mt-2 block text-sm text-emerald-600">+۱۲.۴٪</span>
  </article>
</div>

خروجی مورد انتظار

KPI Card خوانا برای داشبورد.

نکات مهم و خطاهای رایج

  • Sidebar صرفاً hidden نباشد؛ مسیر دسترسی موبایل لازم است.
  • عدد بدون واحد یا بازه زمانی قابل تفسیر نیست.

تمرین پیشنهادی

برای Sidebar یک دکمه موبایل و برای KPI حالت Loading اضافه کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS