AAccordion

AAccordion is a stack of collapsible panels built on top of ACollapse. Compose it with AAccordionItem (a header + collapsible body). Use mode="single" for classic accordion behavior (one panel open at a time), or mode="multiple" to keep several open. Bind v-model:modelValue to control which panels are open.

Import

import { Accordion, AccordionItem } from '@any-design/anyui/vue';
// React:  import { Accordion, AccordionItem } from '@any-design/anyui/react';
// Svelte: import { Accordion, AccordionItem } from '@any-design/anyui/svelte';

Basic usage

<template>
  <AAccordion v-model="open">
    <AAccordionItem :value="1" title="What is AnyUI?">
      AnyUI is a cross-framework component library.
    </AAccordionItem>
    <AAccordionItem :value="2" title="Is it themeable?">
      Yes — every component ships with CSS variables.
    </AAccordionItem>
  </AAccordion>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Accordion, AccordionItem } from '@any-design/anyui/vue';
const open = ref(1);
</script>

Examples

Multiple mode

Set mode="multiple" to allow several panels open at once. modelValue becomes an array of values.

<template>
  <AAccordion v-model="open" mode="multiple">
    <AAccordionItem :value="1" title="First">Several panels can stay open.</AAccordionItem>
    <AAccordionItem :value="2" title="Second">Toggle each independently.</AAccordionItem>
  </AAccordion>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Accordion, AccordionItem } from '@any-design/anyui/vue';
const open = ref([1]);
</script>

Custom header & icons

Use the header slot to render a custom header instead of title. Pass icon for a leading icon, and expandIcon to customize the expand / collapse chevron.

Disabled & round

Set disabled on an item to prevent toggling it. Set round on AAccordion for rounded corners, and border={false} for a borderless look.

Non-collapsible single

In single mode, set collapsible={false} to always keep one panel open (clicking the open panel won’t close it).

AAccordion Props

Prop	Type	Default	Description
modelValue	String | Number | Array	—	Open item value(s). Single mode: one value; multiple mode: array.
mode	‘single’ | ‘multiple’	‘single’	Opening behavior.
collapsible	Boolean	true	In single mode, allow all panels to be closed.
border	Boolean	true	Show a border around the accordion.
round	Boolean	false	Rounded corners.

AAccordionItem Props

Prop	Type	Default	Description
value	String | Number	—	Value identifying this item. When omitted, the index is used.
title	String	''	Header text (ignored when the header slot is used).
icon	String	''	Leading icon name (iconify).
expandIcon	String	'ic:round-keyboard-arrow-down'	Expand / collapse icon.
disabled	Boolean	false	Disable this item.

AAccordionItem Slots

Slot	Description
default	Collapsible body content.
header	Custom header content (replaces title).

AAccordion

AAccordion 是一组基于 ACollapse 的可折叠面板。由 AAccordionItem（头部 + 可折叠内容）组合使用。mode="single" 为经典手风琴（同时只展开一个），mode="multiple" 可同时展开多个。通过 v-model:modelValue 控制展开的面板。

引入

import { Accordion, AccordionItem } from '@any-design/anyui/vue';
// React:  import { Accordion, AccordionItem } from '@any-design/anyui/react';
// Svelte: import { Accordion, AccordionItem } from '@any-design/anyui/svelte';

基础用法

<template>
  <AAccordion v-model="open">
    <AAccordionItem :value="1" title="AnyUI 是什么？">
      AnyUI 是一个跨框架组件库。
    </AAccordionItem>
    <AAccordionItem :value="2" title="支持主题吗？">
      支持 —— 每个组件都基于 CSS 变量。
    </AAccordionItem>
  </AAccordion>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Accordion, AccordionItem } from '@any-design/anyui/vue';
const open = ref(1);
</script>

示例

多开模式

设置 mode="multiple" 允许同时展开多个面板，modelValue 为值数组。

<template>
  <AAccordion v-model="open" mode="multiple">
    <AAccordionItem :value="1" title="第一段">多个面板可同时展开。</AAccordionItem>
    <AAccordionItem :value="2" title="第二段">独立切换每个面板。</AAccordionItem>
  </AAccordion>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Accordion, AccordionItem } from '@any-design/anyui/vue';
const open = ref([1]);
</script>

自定义头部与图标

使用 header 插槽替代 title 渲染自定义头部；传 icon 显示前导图标，传 expandIcon 自定义展开 / 收起箭头。

禁用与圆角

为 item 设置 disabled 可禁止切换；为 AAccordion 设置 round 得到圆角，设置 border={false} 去除外边框。

不可全部收起

single 模式下设置 collapsible={false} 可始终保留一个展开面板（点击已展开面板不会收起）。

AAccordion 属性

属性	类型	默认值	说明
modelValue	String | Number | Array	—	展开项的值。单选模式为单个值；多选模式为数组。
mode	‘single’ | ‘multiple’	‘single’	展开行为。
collapsible	Boolean	true	单选模式下是否允许全部收起。
border	Boolean	true	是否显示外边框。
round	Boolean	false	是否圆角。

AAccordionItem 属性

属性	类型	默认值	说明
value	String | Number	—	标识该项的值，省略时使用索引。
title	String	''	头部文本（使用 header 插槽时忽略）。
icon	String	''	前导图标名（iconify）。
expandIcon	String	'ic:round-keyboard-arrow-down'	展开 / 收起图标。
disabled	Boolean	false	是否禁用。

AAccordionItem 插槽

插槽	说明
default	可折叠内容。
header	自定义头部内容（替代 title）。