docs_vue2/one/docs/components/collapse.md

Collapse 折叠面板

:::tip Collapse 组件可以内联在 Accordion 组件中使用。 :::

示例

尺寸

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

样式变体

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

展开图标的位置

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

API

属性

名称	类型	默认值	描述
ui	string=	-	[^ui]
label	string	-	折叠面板标题。
expanded	boolean=	false	[^expanded]
disabled	boolean=	false	是否为禁用状态。
name	`string	number=`	-
toggle-position	string	'start'	[^toggle-position]

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

+++枚举值

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

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

折叠面板是否展开。 ^^^

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

+++枚举值

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

插槽

名称	描述
default	折叠式面板内容区。
title	折叠式面板标题区。
title-after	折叠式面板标题后区域。

事件

名称	描述
toggle	点击标题区触发展开/收起时触发。回调参数为 (expanded: boolean)。expanded 为面板是否展开。

图标

名称	描述
expand	收起状态，点击后展开。
collapse	展开状态，点击后收起。