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

State و Variantها

Group، Peer و Data Attribute

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

محتوای درس Group، Peer و Data Attribute

Group، Peer و Data Attribute را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

Variantها حالت تعامل یا وضعیت عنصر را توصیف می‌کنند. hover، focus-visible، active و disabled برای خود عنصر هستند؛ group وضعیت والد، peer وضعیت هم‌سطح و data-* وضعیت اعلام‌شده توسط برنامه را به Style متصل می‌کنند.

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

  1. حالت پایه و Hover را طراحی کنید.
  2. Focus صفحه‌کلید و Disabled را قابل تشخیص کنید.
  3. برای وابستگی بین عناصر از group، peer یا data Variant استفاده کنید.

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

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

index.html
<label class="group flex cursor-pointer items-center gap-3 rounded-xl border p-4 hover:bg-slate-50">
  <input type="checkbox" class="peer sr-only" />
  <span class="size-5 rounded border peer-checked:border-blue-600 peer-checked:bg-blue-600"></span>
  <span class="font-medium group-hover:text-blue-700">فعال‌سازی اعلان‌ها</span>
</label>

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

Checkbox سفارشی با Peer و Hover گروه.

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

  • Hover در دستگاه لمسی جایگزین حالت انتخاب‌شده نیست.
  • عنصر Disabled نباید تنها با کاهش Opacity مشخص شود.

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

مثال را فقط با Tab، Space و Enter کنترل و نتیجه را بررسی کنید.

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