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

State و Variantها

Hover، Focus، Active و Disabled

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

محتوای درس Hover، Focus، Active و Disabled

Hover، Focus، Active و Disabled را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت 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
<button
  class="rounded-xl bg-indigo-600 px-5 py-3 font-semibold text-white
         hover:bg-indigo-700 active:scale-[.98]
         focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-indigo-500/30
         disabled:cursor-not-allowed disabled:opacity-50">
  ثبت
</button>

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

دکمه با Stateهای کامل تعامل.

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

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

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

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

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