ACollapse
ACollapse is a transition wrapper that animates its content between expanded and collapsed states. Toggle visible to expand or collapse. Set direction for horizontal collapse, and alwaysRender to keep content in the DOM when hidden.
Import
import { Collapse } from '@any-design/anyui/vue';
// React: import { Collapse } from '@any-design/anyui/react';
// Svelte: import { Collapse } from '@any-design/anyui/svelte';Basic usage
<template>
<AButton @click="open = !open">Toggle</AButton>
<ACollapse :visible="open">
<p>This content expands and collapses smoothly.</p>
</ACollapse>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(true);
</script>Examples
Horizontal
Set direction="horizontal" to collapse width instead of height.
<template>
<AButton @click="open = !open">Toggle</AButton>
<ACollapse :visible="open" direction="horizontal">
<div style="width: 300px">Collapses horizontally.</div>
</ACollapse>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(true);
</script>Always render
By default the content is removed from the DOM after collapsing. Set alwaysRender to keep it mounted (useful for forms that shouldn’t lose state).
<template>
<ACollapse :visible="open" always-render>
<AInput placeholder="State is preserved" />
</ACollapse>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(true);
</script>Props
| Prop | Type | Default | Description |
|---|---|---|---|
visible |
Boolean | false | Whether content is expanded. |
direction |
‘horizontal’ | ‘vertical’ | ‘vertical’ | Collapse direction. |
alwaysRender |
Boolean | false | Keep content in the DOM when collapsed. |
renderWaitTime |
Number | 100 | Delay (ms) before removing content after collapse. |
Slots
| Slot | Props | Description |
|---|---|---|
default |
— | Collapsible content. |
ACollapse
ACollapse 是在展开与收起状态之间过渡的包装器。通过 visible 切换展开 / 收起。设置 direction 可横向收起，alwaysRender 可在隐藏时仍保留内容在 DOM 中。
引入
import { Collapse } from '@any-design/anyui/vue';
// React: import { Collapse } from '@any-design/anyui/react';
// Svelte: import { Collapse } from '@any-design/anyui/svelte';基础用法
<template>
<AButton @click="open = !open">切换</AButton>
<ACollapse :visible="open">
<p>这段内容会平滑地展开与收起。</p>
</ACollapse>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(true);
</script>示例
横向
设置 direction="horizontal" 改为按宽度收起。
<template>
<AButton @click="open = !open">切换</AButton>
<ACollapse :visible="open" direction="horizontal">
<div style="width: 300px">横向收起。</div>
</ACollapse>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(true);
</script>始终保留
默认收起后内容会从 DOM 移除。设置 alwaysRender 可保留挂载（适合不应丢失状态的表单）。
<template>
<ACollapse :visible="open" always-render>
<AInput placeholder="状态会被保留" />
</ACollapse>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(true);
</script>属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
visible |
Boolean | false | 是否展开。 |
direction |
‘horizontal’ | ‘vertical’ | ‘vertical’ | 收起方向。 |
alwaysRender |
Boolean | false | 收起时仍保留内容在 DOM 中。 |
renderWaitTime |
Number | 100 | 收起后移除内容的延迟（ms）。 |
插槽
| 插槽 | 作用域参数 | 说明 |
|---|---|---|
default |
— | 可折叠内容。 |