Загрузка...

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

Пример создания аккордеона в Alpine.js

Создание аккордеона (Accordion) с использованием Alpine.js и Tailwind CSS — это отличный способ организовать контент на веб-странице, позволяя пользователям раскрывать и скрывать секции по мере необходимости. Давайте создадим простой пример аккордеона.

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

Вот пример 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>Accordion с 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="{ openIndex: null }" class="space-y-4">
    <!-- Аккордеон секция 1 -->
    <div>
        <button @click="openIndex === 1 ? openIndex = null : openIndex = 1" class="flex justify-between items-center w-full p-4 bg-white border rounded-lg shadow">
            <span class="font-semibold">Секция 1</span>
            <svg class="w-5 h-5 transform" :class="openIndex === 1 ? 'rotate-180' : 'rotate-0'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>
        <div x-show="openIndex === 1" class="mt-2 p-4 bg-gray-50 border rounded-lg">
            <p>Это содержимое для секции 1. Здесь вы можете разместить любую информацию.</p>
        </div>
    </div>

    <!-- Аккордеон секция 2 -->
    <div>
        <button @click="openIndex === 2 ? openIndex = null : openIndex = 2" class="flex justify-between items-center w-full p-4 bg-white border rounded-lg shadow">
            <span class="font-semibold">Секция 2</span>
            <svg class="w-5 h-5 transform" :class="openIndex === 2 ? 'rotate-180' : 'rotate-0'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>
        <div x-show="openIndex === 2" class="mt-2 p-4 bg-gray-50 border rounded-lg">
            <p>Это содержимое для секции 2. Здесь вы можете разместить любую информацию.</p>
        </div>
    </div>

    <!-- Аккордеон секция 3 -->
    <div>
        <button @click="openIndex === 3 ? openIndex = null : openIndex = 3" class="flex justify-between items-center w-full p-4 bg-white border rounded-lg shadow">
            <span class="font-semibold">Секция 3</span>
            <svg class="w-5 h-5 transform" :class="openIndex === 3 ? 'rotate-180' : 'rotate-0'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg>
        </button>
        <div x-show="openIndex === 3" class="mt-2 p-4 bg-gray-50 border rounded-lg">
            <p>Это содержимое для секции 3. Здесь вы можете разместить любую информацию.</p>
        </div>
    </div>
</div>

</body>
</html>

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

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

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

      openIndex

      , которая будет хранить индекс открытой секции аккорде она (или

      null

      , если ни одна секция не открыта).

  2. Кнопки для секций:
    • Каждая секция аккордеона представлена кнопкой, которая содержит обработчик события
      @click="openIndex === X ? openIndex = null : openIndex = X"

      , где

      X

      — это номер секции. Это позволяет открывать и закрывать секции при нажатии на соответствующие кнопки.

  3. Иконка стрелки:
    • Мы используем SVG-иконку стрелки, которая поворачивается в зависимости от состояния секции. Класс
      :class="openIndex === X ? 'rotate-180' : 'rotate-0'"

      управляет вращением иконки.

  4. Содержимое секций:
    • Каждая секция содержит
      div

      с

      x-show="openIndex === X"

      , который управляет видимостью содержимого секции. Оно будет отображаться только тогда, когда соответствующий индекс открыт.

  5. Стилизация:
    • Мы используем классы Tailwind CSS для стилизации кнопок и содержимого секций, чтобы они выглядели аккуратно и современно.

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

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

Заключение

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

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

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