Collapse

Плагин Collapse позволяет разворачивать и сворачивать элементы с помощью плавной анимации.

Поскольку такое поведение и реализация отличаются от стандартной системы переходов Alpine, эта функциональность была выделена в специальный плагин.

Установка

Вы можете использовать этот плагин, включив его из тега <script> или установив с помощью менеджера пакетов.

Через CDN

Вы можете подключить CDN-сборку этого плагина с помощью тега <script>, только подключать нужно ДО основного JS-файла Alpine.

jsDelivr CDN
unpkg CDN

<!-- Collapse Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<!-- Collapse Plugin -->
<script defer src="https://unpkg.com/@alpinejs/collapse@latest/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>

Через менеджер пакетов

Вы можете установить Collapse для использования внутри вашей сборки следующим образом:

npm i @alpinejs/collapse

pnpm add @alpinejs/collapse

yarn add @alpinejs/collapse

Затем инициализируйте его в своей сборке:

import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';

Alpine.plugin(collapse);
Alpine.start();

x-collapse

Основным API для использования этого плагина является директива x-collapse.

x-collapse может существовать только в элементе, у которого уже есть директива x-show. При добавлении к элементу x-show, x-collapse будет плавно «сворачивать» и «расширять» элемент, когда его видимость переключается путём анимации его свойства высоты.

Например:

<div x-data="{ expanded: false }">
    <button x-on:click="expanded = !expanded">Переключить содержимое</button>
    <div x-show="expanded" x-collapse>
        <div class="pt-4">
            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.
        </div>
    </div>
</div>

Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.

Модификаторы

.duration

Вы можете настроить продолжительность перехода свёртывания/развёртывания, добавив модификатор .duration:

<div x-data="{ expanded: false }">
    <button x-on:click="expanded = !expanded">Переключить содержимое</button>
    <div x-show="expanded" x-collapse.duration.3000ms>
        <div class="pt-4">
            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.
        </div>
    </div>
</div>

.min

По умолчанию «свёрнутое» состояние x-collapse устанавливает высоту элемента в 0px, а также устанавливает display: none;.

Иногда полезно «отрезать» элемент, а не полностью его скрывать. Используя модификатор .min, вы можете установить минимальную высоту для «свёрнутого» состояния x-collapse Например:

<div x-data="{ expanded: true }">
    <button x-on:click="expanded = !expanded">Переключить содержимое</button>
    <div x-show="expanded" x-collapse.min.50px>
        <div class="pt-4">
            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.
        </div>
    </div>
</div>

Проверка знаний

С помощью какой директивы задействуется этот плагин?
1. x-colapse
2. x-spoiler
3. Правильных ответов нет
Как указать продолжительность перехода свёртывания/развёртывания в 10 секунд?
1. Добавить модификатор .duration.10s
2. Добавить модификатор .duration.10ms
3. Добавить модификатор .duration.10sec