Загрузка...

Создание компонента Toggle в Alpine.js

Пример создания переключателя в Alpine.js

Создание переключателя (Toggle) с использованием Alpine.js и Tailwind CSS — это простой и эффективный способ добавить интерактивность на вашу веб-страницу. Давайте создадим пример переключателя, который будет изменять свое состояние при нажатии.

Пример кода для Toggle

Вот пример HTML-кода для создания переключателя с использованием Alpine.js и Tailwind CSS:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggle с Alpine.js и Tailwind CSS</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-gray-100 p-6">

<div x-data="{ isOn: false }" class="flex items-center">
    <!-- Переключатель -->
    <button @click="isOn = !isOn" class="relative inline-flex items-center h-6 rounded-full w-11 transition-colors duration-200 ease-in-out" :class="isOn ? 'bg-blue-600' : 'bg-gray-300'">
        <span class="sr-only">Включить или выключить</span>
        <span class="translate-x-0.5 inline-block w-5 h-5 transform bg-white rounded-full transition-transform duration-200 ease-in-out" :class="isOn ? 'translate-x-5' : 'translate-x-0'"></span>
    </button>
    <span class="ml-3 text-gray-700" x-text="isOn ? 'Включено' : 'Выключено'"></span>
</div>

</body>
</html>

Объяснение кода

  1. Инициализация Alpine.js:
    • Мы используем
      x-data="{ isOn: false }"

      для создания переменной

      isOn

      , которая будет управлять состоянием переключателя (включен или выключен).

  2. Переключатель:
    • Кнопка содержит обработчик события
      @click="isOn = !isOn"

      , который переключает состояние переменной

      isOn

      при нажатии на кнопку.

    • Мы используем классы
      relative

      ,

      inline-flex

      ,

      items-center

      ,

      h-6

      ,

      rounded-full

      , и

      w-11

      для стилизации переключателя.

  3. Цвета переключателя:
    • Мы используем
      :class="isOn ? 'bg-blue-600' : 'bg-gray-300'"

      для изменения цвета фона переключателя в зависимости от состояния

      isOn

      .

  4. Кнопка переключения:
    • Внутри кнопки мы добавляем элемент
      span

      , который представляет собой круглый индикатор переключения. Мы используем

      :class="isOn ? 'translate-x-5' : 'translate-x-0'"

      для перемещения индикатора влево или вправо в зависимости от состояния

      isOn

      .

  5. Текст состояния:
    • Мы добавляем текст, который отображает текущее состояние переключателя, используя
      x-text="isOn ? 'Включено' : 'Выключено'"

      .

Пример использования

Теперь, когда вы нажимаете на переключатель, он изменяет свое состояние между “Включено” и “Выключено”, а также меняет цвет и положение индикатора.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *