CSS-перемикачі Як створити ефективний компонент toggle

У світі веброзробки важливу роль відіграють інтерфейси, які не лише забезпечують зручність користування, але й виглядають стильно та функціонально. Один з таких елементів — перемикачі (toggle), які використовуються для зміни стану (наприклад, вмикання/вимикання функцій, режимів або налаштувань). У цій статті ми розглянемо, як створити ефективний компонент toggle за допомогою HTML, CSS і трохи JavaScript.

Що таке toggle і чому він важливий?

Toggle — це компонент, який представляє два стани, зазвичай “увімкнено” та “вимкнено”, і дозволяє користувачеві перемикати між ними. Його основне призначення — дати можливість швидко змінювати стан без необхідності переходу між сторінками або перезавантаженням. Приклади використання toggle можна зустріти всюди: від перемикання темного і світлого режимів на вебсайті до вмикання/вимикання певних налаштувань у додатках.

Основні компоненти toggle

Перед тим як перейти до створення, розберемося з базовими складовими будь-якого toggle:

1. Форма (HTML). Toggle — це звичайний елемент форми, зазвичай <input type="checkbox">.
2. Стилі (CSS). Для покращення зовнішнього вигляду елементу необхідно додати стилі. CSS дозволяє зробити toggle привабливим і інтерактивним.
3. Логіка (JavaScript). Додатковий скрипт може знадобитися для обробки подій і взаємодії toggle з іншими елементами на сторінці (опційно).

Створення базового toggle

Найпростіший спосіб створити toggle — використовувати HTML та CSS. Давайте розглянемо процес створення простого та функціонального перемикача.

Крок 1: HTML

Спершу створимо базову структуру перемикача за допомогою HTML:

<label class="toggle">
  <input type="checkbox">
  <span class="slider"></span>
</label>

У цьому прикладі використовуємо елемент <label>, оскільки він пов’язує текстову мітку з елементом форми (у нашому випадку — з перемикачем). Елемент <input> з типом checkbox виступає основним компонентом toggle, а <span> використовується для стилізації повзунка.

Крок 2: CSS

Далі додамо стилі, щоб зробити наш перемикач більш інтуїтивним:

.toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

Що тут відбувається?

1. .toggle — це контейнер для перемикача, в якому задаємо розмір і позицію.
2. .toggle input — приховуємо стандартний чекбокс, оскільки будемо використовувати кастомні стилі для відображення перемикача.
3. .slider — стилізований блок, який виглядає як фон для нашого перемикача. Тут використовуємо transition для плавної анімації зміни станів.
4. .slider:before — це стилізація маленького кола, яке рухається вліво або вправо в залежності від стану перемикача.
5. input:checked + .slider — задаємо зміни кольору фону при активованому стані.

Крок 3: Тестування

На цьому етапі можна перевірити наш код у браузері. Тепер ви маєте базовий toggle, який змінює свій стан, коли на нього натискають.

Приблизно так це повино виглядати:

Але на цьому не зупинимось!

Покращення toggle

Іноді базових стилів недостатньо. Розглянемо, як можна покращити наш toggle та зробити його більш привабливим.

Додавання текстових індикаторів

Щоб користувачам було ще зрозуміліше, в якому стані перебуває toggle, можна додати текстові підказки, такі як “On” або “Off”:

<label class="toggle">
  <input type="checkbox">
  <span class="slider"></span>
  <span class="toggle-text on">On</span>
  <span class="toggle-text off">Off</span>
</label>

CSS:

.toggle-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #fff;
  pointer-events: none;
}

.on {
  left: 10px;
}

.off {
  right: 10px;
}

input:checked ~ .off {
  display: none;
}

input:not(:checked) ~ .on {
  display: none;
}

Тематичні стилі

Зробимо toggle динамічним, додавши темні та світлі стилі, що будуть змінюватися залежно від теми сайту:

.dark-mode .slider {
  background-color: #444;
}

.dark-mode input:checked + .slider {
  background-color: #f1c40f;
}

Для активації цих стилів можна додати кнопку, що перемикає клас dark-mode на елемент body.

Ось так виглядає модернізований перемикач:

On Off

Динамічна взаємодія за допомогою JavaScript

Якщо ви хочете, щоб перемикач змінював не тільки стилі, але й виконував певні дії на сторінці, можна підключити JavaScript. Наприклад, зміна теми сайту:

const toggle = document.querySelector('.toggle input');
const body = document.querySelector('body');

toggle.addEventListener('change', () => {
  if (toggle.checked) {
    body.classList.add('dark-mode');
  } else {
    body.classList.remove('dark-mode');
  }
});

Accessibility: Доступність для всіх користувачів

Важливо пам’ятати, що елементи інтерфейсу мають бути доступними для всіх користувачів, включаючи людей з обмеженими можливостями. Додамо кілька атрибутів для покращення доступності:

<label class="toggle" aria-label="Toggle dark mode">
  <input type="checkbox" role="switch" aria-checked="false">
  <span class="slider"></span>
</label>

Такі атрибути, як aria-label, role="switch" та aria-checked, допомагають екранам читання зрозуміти призначення елемента.

Поради для ефективного створення toggle

1. Мінімалізм. Не перевантажуйте toggle зайвими деталями, залишайте його простим і зрозумілим.
2. Анімація. Плавні переходи роблять взаємодію більш природною, тому використовуйте transition для зміни станів.
3. Доступність. Переконайтеся, що ваш toggle доступний для всіх користувачів.
4. Кросбраузерність. Тестуйте ваші стилі в різних браузерах для забезпечення коректної роботи.

Висновок

Компонент toggle є важливим елементом будь-якого сучасного інтерфейсу. Правильно створений toggle не тільки спрощує взаємодію з користувачем, але й додає естетики вашому дизайну. Використання HTML, CSS і трохи JavaScript дозволяє створити гнучкий, доступний і красивий перемикач, який можна адаптувати під будь-які потреби.

Тож тепер ви знаєте, як створити ефективний toggle і можете застосовувати ці знання у своїх вебпроєктах.