Collapse 折叠面板

示例

尺寸

可选的尺寸 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

属性

名称类型默认值描述
labelstring-折叠面板标题。
expandedboolean=false

.sync

折叠面板是否展开。

disabledboolean=false是否为禁用状态。
namestring | number=-当内联在 Accordion 组件中使用时,用来提供已展开面板的唯一标识。

插槽

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

事件

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

图标

名称描述
expand收起状态,点击后展开。
collapse展开状态,点击后收起。
在 GitHub 上编辑此页