آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

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

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

یکی از اجزای رابط کاربری مدرن، Toggle Switch یا کلید تغییر وضعیت است که معمولاً برای روشن و خاموش کردن حالت‌های مختلف در اپلیکیشن‌ها و وب‌سایت‌ها به کار می‌رود. با استفاده از CSS و HTML می‌توانید به سادگی یک Toggle Switch زیبا و کاربردی ایجاد کنید. در این مقاله، نحوه ساخت و طراحی یک Toggle Switch با استفاده از CSS و HTML به صورت گام به گام آموزش داده شده است.

 

ساختار HTML برای Toggle Switch

ابتدا نیاز به یک ساختار ساده HTML داریم که شامل یک checkbox برای کنترل وضعیت و یک label برای استایل‌دهی به آن است. از checkbox استفاده می‌کنیم زیرا به صورت داخلی وضعیت انتخاب شده (چک‌شده) یا نشده را کنترل می‌کند.



< div class="toggle-container" >
  < input type="checkbox" id="toggle" class="toggle-checkbox" >
  < label for="toggle" class="toggle-label" > < / label >
< / div >

 

در اینجا:

  • یک input از نوع checkbox برای کنترل وضعیت ایجاد کرده‌ایم.

  • یک label به عنوان دکمه برای تغییر وضعیت استایل داده‌ایم که در صورت کلیک، وضعیت checkbox تغییر می‌کند.

 

استایل‌دهی اولیه با CSS

در این مرحله، استایل‌های پایه‌ای را به عناصر اضافه می‌کنیم تا ظاهر مناسبی برای Toggle Switch ایجاد شود.



/* مخفی کردن checkbox */
.toggle-checkbox {
  display: none;
}

/* استایل‌دهی به toggle container */
.toggle-container {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 24px;
}

/* استایل‌دهی label برای نمایش toggle switch */
.toggle-label {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s;
}

 

در اینجا:

  • checkbox را مخفی کرده‌ایم زیرا برای کنترل Toggle Switch از label استفاده می‌کنیم.

  • toggle-container عرض و ارتفاع معین و موقعیت نسبی برای نگه‌داری کلید تعیین شده است.

  • toggle-label به عنوان کلید تغییر وضعیت طراحی شده و با رنگ پس‌زمینه و شعاع حاشیه به شکل دایره‌ای درمی‌آید.

 

ایجاد دکمه دایره‌ای برای حرکت در Toggle Switch

برای ایجاد دکمه داخلی که در داخل toggle حرکت می‌کند، از ::before استفاده می‌کنیم.



.toggle-label::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

 

در اینجا:

  • toggle-label::before دکمه داخلی را شبیه‌سازی می‌کند که به شکل یک دایره کوچک است و در موقعیت اولیه خود در سمت چپ toggle قرار می‌گیرد.

  • transform به منظور ایجاد انیمیشن برای حرکت دکمه در هنگام تغییر وضعیت اضافه شده است.

 

استایل‌دهی وضعیت فعال Toggle Switch

در این مرحله، حالت روشن (فعال) را با استفاده از انتخابگر

ایجاد می‌کنیم تا رنگ و موقعیت دکمه داخلی در صورت انتخاب‌شده تغییر کند.



.toggle-checkbox:checked + .toggle-label {
  background-color: #4caf50;
}

.toggle-checkbox:checked + .toggle-label::before {
  transform: translateX(26px);
}

 

در اینجا:

  • background-color رنگ پس‌زمینه toggle-label را هنگام فعال شدن به سبز تغییر می‌دهد.

  • transform: translateX(26px) دکمه داخلی را به سمت راست منتقل می‌کند تا نشان دهد toggle در حالت روشن است.

 

اضافه کردن انیمیشن نرم

برای زیبایی بیشتر، انیمیشن حرکت دکمه را نرم‌تر می‌کنیم تا هنگام تغییر وضعیت، یک جلوه بصری جذاب داشته باشیم.



.toggle-label {
  transition: background-color 0.3s ease;
}

.toggle-label::before {
  transition: transform 0.3s ease;
}

 

در اینجا:

  • از ease در transition استفاده کرده‌ایم تا تغییرات رنگ پس‌زمینه و حرکت دکمه نرم‌تر و روان‌تر انجام شود.

 

کد کامل CSS و HTML



< div class="toggle-container" >
  < input type="checkbox" id="toggle" class="toggle-checkbox" >
  < label for="toggle" class="toggle-label" > < / label >
< / div >

 



/* مخفی کردن checkbox */
.toggle-checkbox {
  display: none;
}

/* استایل‌دهی به toggle container */
.toggle-container {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 24px;
}

/* استایل‌دهی label برای نمایش toggle switch */
.toggle-label {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* دکمه داخلی toggle */
.toggle-label::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* استایل‌دهی برای حالت فعال toggle */
.toggle-checkbox:checked + .toggle-label {
  background-color: #4caf50;
}

.toggle-checkbox:checked + .toggle-label::before {
  transform: translateX(26px);
}

 

نکات و بهترین شیوه‌ها برای استفاده از Toggle Switch

  • تجربه کاربری: اندازه و موقعیت toggle را به گونه‌ای طراحی کنید که کاربر به راحتی بتواند از آن استفاده کند. معمولاً width حدود 50px و height حدود 24px اندازه مناسبی است.

  • نمایش وضعیت فعلی: از رنگ‌های متمایز (مانند سبز برای روشن و خاکستری برای خاموش) برای نمایش وضعیت toggle استفاده کنید تا کاربران بتوانند وضعیت فعلی را به راحتی تشخیص دهند.

  • سازگاری با مرورگرهای مختلف: مطمئن شوید که toggle شما در مرورگرهای مختلف به درستی نمایش داده می‌شود و عملکرد مشابهی دارد.

  • استفاده از transition: انیمیشن‌های نرم و سریع باعث می‌شود که تجربه کاربری بهتری برای کاربران ایجاد شود.

 

نتیجه‌گیری

با استفاده از CSS و HTML، به سادگی می‌توانید یک Toggle Switch زیبا و کاربردی ایجاد کنید. با ترکیب انتخابگرهای CSS و انیمیشن‌ها، می‌توانید تجربه‌ای جذاب برای کاربران فراهم کنید و رابط کاربری خود را حرفه‌ای‌تر کنید. طراحی Toggle Switch می‌تواند در بهبود تعاملات کاربر نقش مهمی داشته باشد و تجربه‌ای لذت‌بخش از وب‌سایت یا اپلیکیشن شما ایجاد کند.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

توابع فلش (Arrow Functions) در جاوا اسکریپت: ساده‌سازی کد با استفاده از ES6

2م شهریور 1403

مطالعه بیشتر

استفاده از setTimeout و setInterval در جاوا اسکریپت: آموزش کامل و مثال‌ها

استفاده از setTimeout و setInterval در جاوا اسکریپت: آموزش کامل و مثال‌ها

29م مهر 1403

مطالعه بیشتر

آموزش تگ‌های پیوندی و اتصالی در HTML: ایجاد لینک‌های داخلی و خارجی

آموزش تگ‌های پیوندی و اتصالی در HTML: ایجاد لینک‌های داخلی و خارجی

29م مرداد 1402

مطالعه بیشتر

آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

4م مهر 1403

مطالعه بیشتر

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

28م مهر 1403

مطالعه بیشتر

آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی

آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی

4م آبان 1403

مطالعه بیشتر

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

2م مهر 1402

مطالعه بیشتر

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

5م آبان 1403

مطالعه بیشتر

مقدمه و ساختار اولیه HTML: راهنمای شروع طراحی صفحات وب برای مبتدیان

مقدمه و ساختار اولیه HTML: راهنمای شروع طراحی صفحات وب برای مبتدیان

18م مرداد 1402

مطالعه بیشتر

عملگرها و عبارات محاسباتی در جاوا اسکریپت: نحوه استفاده و کاربردهای مختلف

عملگرها و عبارات محاسباتی در جاوا اسکریپت: نحوه استفاده و کاربردهای مختلف

28م شهریور 1402

مطالعه بیشتر

آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر

آموزش جامع توابع در جاوا اسکریپت: نحوه تعریف، فراخوانی و بازگشت مقادیر

2م بهمن 1402

مطالعه بیشتر

مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها

مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها

4م مهر 1403

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد