Appearance

iuiDesign
100%
02:32
本页目录

可以折叠 / 展开的内容区域。

基本用法 ​

用于将复杂的内容区域分组和隐藏，可折叠或展开。默认可以展开多个面板。

html
<iui-collapse label="Title 1">
  <view>This is content area</view>
  <view>This is content area</view>
  <view>This is content area</view>
</iui-collapse>
<iui-collapse label="Title 1">
  <view>This is content area</view>
  <view>This is content area</view>
  <view>This is content area</view>
</iui-collapse>

组合 ​

通过 iui-collapse-group 可以将多个折叠面板组合为列表。

html
<iui-collapse-group>
  <iui-collapse label="Title 1">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 2">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 3">
    <view>This is content area</view>
  </iui-collapse>
</iui-collapse-group>
<iui-collapse-group>
  <iui-collapse label="Title 1">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 2">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 3">
    <view>This is content area</view>
  </iui-collapse>
</iui-collapse-group>

手风琴 ​

通过 accordion 开启手风琴模式，同时只能打开一个面板。

html
<iui-collapse-group accordion>
  <iui-collapse label="Title 1">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 2">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 3">
    <view>This is content area</view>
  </iui-collapse>
</iui-collapse-group>
<iui-collapse-group accordion>
  <iui-collapse label="Title 1">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 2">
    <view>This is content area</view>
  </iui-collapse>
  <iui-collapse label="Title 3">
    <view>This is content area</view>
  </iui-collapse>
</iui-collapse-group>

自定义 ​

通过 icon 属性可以自定义标题栏左侧的图标，extra 属性可以在标题栏右侧显示更多内容。

html
<iui-collapse label="Title 1" icon="file-text">
  <view>This is content area</view>
</iui-collapse>

<iui-collapse label="Title 2" icon="fire" extra="Information">
  <view>This is content area</view>
</iui-collapse>
<iui-collapse label="Title 1" icon="file-text">
  <view>This is content area</view>
</iui-collapse>

<iui-collapse label="Title 2" icon="fire" extra="Information">
  <view>This is content area</view>
</iui-collapse>

API ​

<Collapse>props
参数描述类型默认值
expand (v-model)是否展开Booleanfalse
name唯一标识String-
label标签String-
icon左侧图标String-
extra右侧额外内容String-
contentStyle内容样式Object-
<Collapse>events
事件名描述参数
change状态变化时触发expand: Boolean
<Collapse>slots
插槽名描述参数
default折叠内容-
<CollapseGroup>props
参数描述类型默认值
activeKey当前展开面板的 nameString | Number-
accordion是否开启手风琴模式Booleanfalse
split是否显示分割线Booleanfalse
<CollapseGroup>slots
插槽名描述参数
default折叠面板组件-