Collapse 折叠面板

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

示例

尺寸

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

Normal size

Small size

<template>
<article>
  <section>
    <veui-collapse
      label="Normal size"
    >
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni asperiores minus vitae voluptatibus enim perspiciatis exercitationem placeat cumque molestias, labore cum, sunt, id veritatis excepturi ipsum facere quis blanditiis neque?
    </veui-collapse>
  </section>
  <section>
    <veui-collapse
      label="Small size"
      ui="s"
    >
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni asperiores minus vitae voluptatibus enim perspiciatis exercitationem placeat cumque molestias, labore cum, sunt, id veritatis excepturi ipsum facere quis blanditiis neque?
    </veui-collapse>
  </section>
</article>
</template>

<script>
import { Collapse } from 'veui'

export default {
  components: {
    'veui-collapse': Collapse
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 20px;
}
</style>

API

属性

名称	类型	默认值	描述
`label`	`string`	-	折叠面板标题。
`expanded`	`boolean=`	`false`	`.sync` 折叠面板是否展开。
`disabled`	`boolean=`	`false`	是否为禁用状态。
`name`	`string\|number=`	-	当内联在 `Accordion` 组件中使用时，用来提供已展开面板的唯一标识。

插槽

名称	描述
`default`	折叠式面板内容区。
`title`	折叠式面板标题区。

事件

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

图标

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