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

Переключатель (Toggle) на Alpine.js и Tailwind CSS

Хотите добавить простой переключатель на сайт? Сделать это легко с помощью Alpine.js и Tailwind CSS.

---

Пример кода

<div x-data="{ on: false }" class="flex items-center">
  <!-- Переключатель -->
  <button 
    @click="on = !on"
    class="relative inline-flex items-center h-6 w-11 rounded-full transition-colors"
    :class="on ? 'bg-blue-600' : 'bg-gray-300'">
    
    <span class="sr-only">Toggle</span>
    <span 
      class="inline-block w-5 h-5 bg-white rounded-full transform transition"
      :class="on ? 'translate-x-5' : 'translate-x-0'">
    </span>
  </button>

  <!-- Текст -->
  <span class="ml-3" x-text="on ? 'Включено' : 'Выключено'"></span>
</div>

---

Как это работает

• x-data="{ on: false }" — хранит состояние (вкл/выкл).
• @click="on = !on" — меняет состояние при клике.
• :class="..." — меняет цвет и положение кружка.
• x-text="..." — показывает текст «Включено» или «Выключено».

---

👉 Всё! Теперь у вас есть готовый переключатель.