آموزش ساخت 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 می‌تواند در بهبود تعاملات کاربر نقش مهمی داشته باشد و تجربه‌ای لذت‌بخش از وب‌سایت یا اپلیکیشن شما ایجاد کند.