Baidu DLS

返回 DLS

Accordion 手风琴面板

Accordion 组件需要内联 Collapse 组件使用。

示例

尺寸

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

Sun
Moon
Sun
Moon
<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>

允许多个展开

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

Sun
Moon
<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>

API

属性

名称类型默认值描述
multipleboolean=false是否允许多个子面板同时展开。
disabledboolean=false是否为禁用状态。
expandedstring|Array<string>-

.sync

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

插槽

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

事件

名称描述
toggle

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

名称类型描述
expandboolean是否展开。
namestring被切换的折叠面板标识。
expandedstring|Array<string>当前所有被展开的折叠面板标识。