Collapse 折叠面板

示例

尺寸

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

Normal size
Small size
在 GitHub 上编辑此页编辑
<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>

样式变体

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

Sun
在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <div class="control-wrap">
      <veui-radio-button-group
        v-model="variant"
        ui="s"
        class="control-item"
        :items="variants"
      />
      <veui-radio-button-group
        v-model="bordered"
        ui="s"
        class="control-item"
        :items="[
          { label: 'default', value: '' },
          { label: 'bordered', value: 'bordered' },
          { label: 'borderless', value: 'borderless' }
        ]"
      />
      <veui-check-button-group
        v-model="dull"
        ui="s"
        class="control-item"
        :items="[{ label: 'dull', value: 'dull' }]"
      />
    </div>
    <veui-collapse
      :ui="realVariants"
      label="Sun"
    >
      The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
    </veui-collapse>
  </section>
</article>
</template>

<script>
import { Collapse, RadioButtonGroup, CheckButtonGroup } from 'veui'

export default {
  components: {
    'veui-collapse': Collapse,
    'veui-radio-button-group': RadioButtonGroup,
    'veui-check-button-group': CheckButtonGroup
  },
  data () {
    return {
      variants: [
        { label: 'default', value: '' },
        { label: 'simple', value: 'simple' },
        { label: 'basic', value: 'basic' },
        { label: 'strong', value: 'strong' }
      ],
      variant: '',
      bordered: '',
      dull: null
    }
  },
  computed: {
    realVariants () {
      return [this.variant, this.bordered || '', this.dull || '']
        .join(' ')
        .trim()
    }
  }
}
</script>

<style scoped>
section {
  margin-bottom: 20px;
}

.control-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.control-item {
  margin-right: 12px;
}
</style>

展开图标的位置

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

Sun
在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <div class="control-wrap">
      <veui-radio-button-group
        v-model="position"
        class="control-item"
        ui="s"
        :items="positions"
      />
    </div>
    <veui-collapse
      label="Sun"
      :toggle-position="position"
    >
      The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
    </veui-collapse>
  </section>
</article>
</template>

<script>
import { Collapse, RadioButtonGroup } from 'veui'

export default {
  components: {
    'veui-collapse': Collapse,
    'veui-radio-button-group': RadioButtonGroup
  },
  data () {
    return {
      position: 'start',
      positions: [
        { label: 'start', value: 'start' },
        { label: 'end', value: 'end' },
        { label: 'none', value: 'none' }
      ]
    }
  }
}
</script>

<style scoped>
section {
  margin-bottom: 20px;
}

.control-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.control-item {
  margin-right: 12px;
}
</style>

API

属性

名称类型默认值描述
uistring=-

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

描述
simple简洁样式。
basic白底样式。
strong白底样式。
bordered有外边框。
borderless无外边框。
dull标题区域是不否响应鼠标交互改变样式。
s小尺寸样式。
m中尺寸样式。
labelstring-折叠面板标题。
expandedboolean=false

.sync

折叠面板是否展开。

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

设置展开图标的位置。

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

插槽

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

事件

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

图标

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