Accordion

Demos

Size

Optional size ui property value: s / m.

Sun
Moon
Sun
Moon
Edit this page on GitHubEdit
<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>

Style

You can use the ui property to set multiple styles.

Sun
Moon
Edit this page on GitHubEdit
<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

You can use the multiple properties to multiple panels to expand at the same time.

Sun
Moon
Edit this page on GitHubEdit
<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>

Icon position

You can use the toggle-position property to set the position of the expand icon.

Sun
Moon
Edit this page on GitHubEdit
<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

Accordion Props

NameTypeDefaultDescription
uistring=-

Preset styles. A combination of a set of enumeration values separated by spaces. Among them, you can only choose one of simple / basic / strong. If you don't set it, it will be the default normal style. Only one of bordered / borderless can be selected.

ValueDescription
simpleSimple style.
basicWhite background style.
strongWhite background style.
borderedThere is an outer border.
borderlessNo outer border.
dullThe title area does not change its style in response to mouse interaction.
sSmall size style.
mMedium size style.
multipleboolean=falseAllow multiple sub-panels to expand at the same time.
disabledboolean=falseDisabled the accordion.
expandedstring | Array<string>-

.sync

Expanded accordion panel,Corresponds to the name property of the inline Collapse component. When multiple is true, it is an array of accordion panel identification.

toggle-positionstring'start'

Position of the expansion icon.

ValueDescription
startExpand icon is at the start position, is the default position.
endexpand icon is at the end position.
noneNo expansion icon.

Accordion Slots

NameDescription
defaultThe content area is used to inline the Collapse component.

Accordion Events

NameDescription
toggle

Triggered when the title area of the inner collapsible panel is clicked to trigger the expand/collapse. The callback parameter is (expand: boolean, name: string, expanded).

NameTypeDescription
expandbooleanExpand the accordion.
namestringSwitch expanded accordion panel.
expandedstring | Array<string>All currently expanded accordion panel.
Edit this page on GitHubEdit