docs_vue2/one/docs/components/collapse.md
xiaodemen 0b7c8fd460 docs: add docs for Accordion/Collapse/Popover
Change-Id: Ibb023741445c134973a2ea993c498f02d83f3a98
2021-11-20 13:25:23 +08:00

2.4 KiB

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 展开状态,点击后收起。