Collapse 插件

Alpine 的 Collapse 插件允许你使用平滑的动画展开和折叠元素。

由于这种行为及其实现方式与 Alpine 标准的过渡系统不同，因此该功能被做成了一个专门的插件。

安装

你可以通过 <script> 标签引入或通过 NPM 安装来使用此插件：

通过 CDN

你可以将此插件的 CDN 构建版本作为 <script> 标签引入，只需确保在 Alpine 核心 JS 文件之前引入。

<!-- Alpine 插件 -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>

<!-- Alpine 核心 -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

通过 NPM

你可以从 NPM 安装 Collapse 以在打包中使用：

npm install @alpinejs/collapse

然后从你的打包工具中初始化它：

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

Alpine.plugin(collapse)

...

x-collapse

使用此插件的主要 API 是 x-collapse 指令。

x-collapse 只能存在于已有 x-show 指令的元素上。当添加到 x-show 元素时，x-collapse 会在元素的可见性被切换时，通过动画改变其高度属性，从而平滑地"折叠"和"展开"元素。

例如：

<div x-data="{ expanded: false }">
    <button @click="expanded = ! expanded">Toggle Content</button>

    <p x-show="expanded" x-collapse>
        ...
    </p>
</div>

Toggle Content

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 @click="expanded = ! expanded">Toggle Content</button>

    <p x-show="expanded" x-collapse.duration.1000ms>
        ...
    </p>
</div>

Toggle Content

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.

.min

默认情况下，x-collapse 的"折叠"状态将元素的高度设置为 0px，同时也设置 display: none;。

有时，"截断"元素比完全隐藏它更有用。通过使用 .min 修饰符，你可以为 x-collapse 的"折叠"状态设置一个最小高度。例如：

<div x-data="{ expanded: false }">
    <button @click="expanded = ! expanded">Toggle Content</button>

    <p x-show="expanded" x-collapse.min.50px>
        ...
    </p>
</div>

Toggle Content

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.