VEUI

VEUI on GitHub
English

Accordion 手风琴面板

示例

尺寸

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

Sun
Moon
Sun
Moon
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-accordion>
      <veui-collapse 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>
      <veui-collapse label="Moon">
        The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
      </veui-collapse>
    </veui-accordion>
  </section>
  <section>
    <veui-accordion ui="s">
      <veui-collapse 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>
      <veui-collapse label="Moon">
        The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
      </veui-collapse>
    </veui-accordion>
  </section>
</article>
</template>

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

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

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

样式变体

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

Sun
Moon
在 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-accordion :ui="realVariants">
      <veui-collapse 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>
      <veui-collapse label="Moon">
        The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
      </veui-collapse>
    </veui-accordion>
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-accordion': Accordion,
    '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>

允许多个展开

可使用 multiple 属性来允许多个面板同时展开。

Sun
Moon
在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-accordion multiple>
    <veui-collapse 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>
    <veui-collapse label="Moon">
      The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
    </veui-collapse>
  </veui-accordion>
</article>
</template>

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

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

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

展开图标位置

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

Sun
Moon
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <div class="control-wrap">
      <veui-radio-button-group
        v-model="position"
        class="control-item"
        ui="s"
        :items="positions"
      />
    </div>
    <veui-accordion :toggle-position="position">
      <veui-collapse 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>
      <veui-collapse label="Moon">
        The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
      </veui-collapse>
    </veui-accordion>
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-accordion': Accordion,
    '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中尺寸样式。
multipleboolean=false是否允许多个子面板同时展开。
disabledboolean=false是否为禁用状态。
expandedstring | Array<string>-

.sync

已展开的折叠面板标识,对应于内联 Collapse 组件的 name 属性。当 multipletrue 时,为折叠面板标识的数组。

toggle-positionstring'start'

设置展开图标的位置。

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

插槽

名称描述
default内容区,用来内联 Collapse 组件。

事件

名称描述
toggle

点击内部折叠面板标题区触发展开/收起时触发。回调参数为 (expand: boolean, name: string, expanded)

名称类型描述
expandboolean是否展开。
namestring被切换的折叠面板标识。
expandedstring | Array<string>当前所有被展开的折叠面板标识。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2023