یک ویجت رای گیری جذاب با Tailwind CSS ایجاد کنید

با انتخابات آتی آمریکا، زمان بسیار خوبی برای تمرین مهارت های رای دادن و آماده شدن برای نظرسنجی با این ویجت بدون جاوا اسکریپت است!

در این مقاله نحوه ایجاد a را بررسی خواهیم کرد ویجت رای گیری ساده با استفاده از Tailwind CSS به یک دکمه رادیویی را سفارشی کنید بدون نیاز به جاوا اسکریپت این ویجت به کاربران این امکان را می دهد رای موافق یا رای مخالف و نمایش امتیاز فعلی، افزایش تعامل کاربر در سایت شما

مرحله 1: Sprite را ایجاد کنید

در این مثال، من از نماد پیکان رو به بالا انیمیشن GIF توسط Icons8 به عنوان پایه استفاده کردم و رنگ آن را سفارشی کردم. سپس GIF را به یک sprite تبدیل کردم. ما همچنین به یک تصویر دکمه ثابت نیاز داریم.

من اسپرایت حاوی 24 تصویر است که برای ایجاد انیمیشن یکی پس از دیگری نمایش داده می شوند، درست مانند یک رول فیلم. شما می توانید یک اسپرایت با تصاویر بیشتر یا کمتر ایجاد کنید، اما باید انیمیشن را تطبیق دهید.

مرحله 2: توضیح کد

2.1 گسترش Tailwind با انیمیشن ما

ابتدا، پیکربندی پیش‌فرض Tailwind CSS را گسترش می‌دهیم تا انیمیشن‌های ما را در بر بگیرد. sprite به عنوان یک تصویر پس زمینه تنظیم می شود و ما یک تصویر ساده ایجاد می کنیم @keyframes قانون برای قرار دادن پس زمینه سپس با استفاده از آن انیمیشن اسپرایت را ایجاد می کنیم.

tailwind.config = {
    theme: {
        extend: {
            keyframes: {
                sprite: {
                    from: {
                        backgroundPosition: "left"
                    },
                    to: {
                        backgroundPosition: "right"
                    }
                }
            },
            animation: {
                "vote-sprite": "sprite .8s steps(23) 1 forwards"
            }
        }
    }
}

اگر از تعداد فریم های متفاوتی در اسپرایت خود استفاده می کنید، تعداد مراحل و مدت انیمیشن را بر اساس آن تنظیم کنید.

2.2 ورودی های رادیویی

سه ورودی رادیویی گزینه های رای گیری را نشان می دهند:

1. رای مخالف: رای منفی دادن

2. خالی: برای لغو رای.

3. رای موافق: برای رای دادن

هر ورودی با استفاده از hidden class و ما به عنوان همتا برای تغییر سبک عناصر بعدی بسته به حالت ورودی های رادیویی استفاده خواهیم کرد.

2.3 برچسب ها

از برچسب ها برای فعال کردن ورودی های رادیویی هنگام کلیک کردن استفاده می شود. ما چهار برچسب را خواهیم داشت که به‌عنوان دکمه‌هایی برای اعمال رأی‌گیری استفاده می‌شوند: یک برچسب برای بررسی رأی منفی، یک برچسب برای لغو رأی منفی علامت زدن خالی، و همان برچسب برای رأی مثبت.

آنها از کلاس های Tailwind برای مدیریت ظاهر و رفتار استفاده می کنند:

• اولین برچسب به طور پیش‌فرض نمایش داده می‌شود و به رای منفی اشاره می‌کند. پس زمینه آن تصویر ثابت است.

• برچسب دوم با علامت زدن downvote نشان داده می شود و حاوی انیمیشن انیمیشنی است که هر بار که ما رای می دهیم اجرا می شود.

• همین اصل برای رأی موافق نیز صادق است.

  
   class="peer/down-btn aspect-square cursor-pointer w-12 peer-checked/down:invisible" for="down-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Downvote">
   class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer left-0 opacity-0 pointer-events-none w-12 transition-opacity peer-hover/down-btn:opacity-100 peer-checked/down:animate-vote-sprite peer-checked/down:pointer-events-auto peer-checked/down:opacity-100 peer-checked/down:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932412479/c91aef3d-6588-4883-b503-2db3b6594ba0.png');" aria-label="Remove downvote">
  
  
   class="peer/up-btn aspect-square cursor-pointer rotate-180 w-12 peer-checked/up:invisible" for="up-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932385888/51fc087e-ca44-4f12-869c-4e50409390b2.png');" aria-label="Upvote">
   class="absolute aspect-square bg-no-repeat bg-cover cursor-pointer opacity-0 pointer-events-none right-0 w-12 transition-opacity peer-hover/up-btn:opacity-100 peer-checked/up:animate-vote-sprite peer-checked/up:pointer-events-auto peer-checked/up:opacity-100 peer-checked/up:hover:opacity-80" for="blank-radio" style="background-image: url('https://cdn.hashnode.com/res/hashnode/image/upload/v1728932423782/2e233a8b-db52-431f-9f1b-7458214ac960.png');" aria-label="Remove upvote">
  

2.4 شمارشگر رای

بخش مرکزی امتیاز رای را نمایش می دهد. با استفاده از transition و translate کلاس‌ها، می‌توانیم وقتی کاربر رای می‌دهد، تغییرات امتیاز را متحرک کنیم. Wrapper مقادیر دیگر را با ماسک می کند overflow-hidden.

 class="group flex items-center h-8 mx-1 overflow-hidden text-2xl">
    
 class="flex flex-col font-semibold items-center transition duration-700 translate-y-0 peer-checked/up:group-[]:-translate-y-8 peer-checked/down:group-[]:translate-y-8">
         class="text-red-700">-1
        0
         class="text-green-800">1
    

2.5 بسته بندی در Flexbox

ما همه چیز را در یک بسته بندی می کنیم inline-flex ظرفی برای اطمینان از اینکه عناصر به خوبی قرار گرفته و تراز شده اند. ما همچنین متوجه شدیم که با کلیک بر روی دکمه‌ها، متنی در دستگاه‌های تلفن همراه انتخاب می‌شود، بنابراین توصیه می‌کنیم از آن استفاده کنید select-none برای رفع مشکل

3. آن را امتحان کنید

نتیجه گیری

این ویجت رای گیری ساده که صرفاً با HTML و Tailwind CSS ساخته شده است، بدون نیاز به جاوا اسکریپت، تجربه کاربری روانی را فراهم می کند. با سفارشی‌سازی سبک‌ها و یکپارچه‌سازی این کد، به راحتی می‌توانید به کاربران اجازه دهید که به طور موثر با محتوای شما تعامل داشته باشند. برای اطلاعات بیشتر در مورد استفاده از Tailwind CSS، اسناد رسمی را بررسی کنید.