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

Table، List و Content

List و Empty State

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

محتوای درس List و Empty State

List و Empty State را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

جدول برای داده جدولی و List برای مجموعه آیتم‌هاست. در موبایل باید Overflow افقی کنترل شود و Empty State توضیح دهد چرا داده‌ای نیست و کاربر قدم بعدی را چگونه بردارد.

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

  1. ساختار معنایی table یا list را حفظ کنید.
  2. Container جدول را overflow-x-auto کنید.
  3. Loading، Empty و Error State را جداگانه طراحی کنید.

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

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

index.html
<div class="rounded-2xl border bg-white">
  <div class="border-b p-4 font-bold">آخرین آموزش‌ها</div>
  <ul class="divide-y">
    <li class="flex items-center justify-between p-4 hover:bg-slate-50">
      <span>Tailwind CSS</span><a class="text-blue-600" href="#">مشاهده</a>
    </li>
  </ul>
</div>

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

لیست ساده و مدیریتی با Hover.

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

  • جدول را با divهای بدون نقش معنایی بازسازی نکنید.
  • Empty State خالی و بدون اقدام بعدی تجربه مبهمی ایجاد می‌کند.

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

پنج ستون و یک عنوان طولانی اضافه و رفتار موبایل را بررسی کنید.

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