docs_vue2/one/docs/components/accordion.md

Accordion 手风琴面板

:::tip Accordion 组件需要内联 Collapse 组件使用。 :::

示例

尺寸

可选的尺寸 ui 属性值：s / m。

样式变体

可使用 ui 属性来设置多种样式变体。

允许多个展开

可使用 multiple 属性来允许多个面板同时展开。

展开图标位置

可使用 toggle-position 属性来设置展开图标的位置。

API

属性

名称	类型	默认值	描述
ui	string=	-	[^ui]
multiple	boolean=	false	是否允许多个子面板同时展开。
disabled	boolean=	false	是否为禁用状态。
expanded	`string	Array`	-
toggle-position	string	'start'	[^toggle-position]

^^^ui 预设样式。为空格分隔的一组枚举值的组合。其中 simple / basic / strong 只能选择一个，不设置则为默认的普通样式。bordered / borderless 只能选择一个。

+++枚举值

值	描述
simple	简洁样式。
basic	白底样式。
strong	白底样式。
bordered	有外边框。
borderless	无外边框。
dull	标题区域是不否响应鼠标交互改变样式。
s	小尺寸样式。
m	中尺寸样式。
+++
^^^

^^^expanded :::badges .sync :::

已展开的折叠面板标识，对应于内联 Collapse 组件的 name 属性。当 multiple 为 true 时，为折叠面板标识的数组。 ^^^

^^^toggle-position 设置展开图标的位置。

+++枚举值

值	描述
start	展开图标位于开始位置，为默认位置。
end	展开图标位于结束位置。
none	无展开图标。
+++
^^^

插槽

名称	描述
default	内容区，用来内联 Collapse 组件。

事件

名称	描述
toggle	[^toggle]

^^^toggle 点击内部折叠面板标题区触发展开/收起时触发。回调参数为 (expand: boolean, name: string, expanded)。

+++参数详情

名称	类型	描述
expand	boolean	是否展开。
name	string	被切换的折叠面板标识。
expanded	`string	Array`
+++
^^^