Collapse

Use collapse panels when content needs to be displayed in sections.

Basic Usage

Multiple panels can be expanded at once by default. You can set which panel is expanded by default.

Panel 1 Title

Panel 2 Title

Panel 3 Title

<template>
  <div>
    <b-collapse v-model="value">
      <b-collapse-panel title="Panel 1 Title" name="1">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </b-collapse-panel>
      <b-collapse-panel title="Panel 2 Title" name="2">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </b-collapse-panel>
      <b-collapse-panel title="Panel 3 Title" name="3">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

Accordion ModeMode

Set accordion for accordion mode; only one panel can be expanded at a time.

Panel 1 Title

Panel 2 Title

Panel 3 Title

<template>
  <div>
    <b-collapse v-model="value" accordion>
      <b-collapse-panel title="Panel 1 Title" name="1">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </b-collapse-panel>
      <b-collapse-panel title="Panel 2 Title" name="2">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </b-collapse-panel>
      <b-collapse-panel title="Panel 3 Title" name="3">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

Simple Mode and Custom Header

simple sets simple mode. You can also customize the header via slot.

Panel 1Title

Panel 2Title

Panel 3Title

<template>
  <div>
    <b-collapse v-model="value" simple>
      <b-collapse-panel title="Panel 1Title" name="1">
        <template #title>
          Panel 1Title
          <b-icon name="smile" size="18"></b-icon>
        </template>
        <p v-for="i in 3" :key="i">我是Content我是Content...</p>
      </b-collapse-panel>
      <b-collapse-panel title="Panel 2Title" name="2">
        <p v-for="i in 3" :key="i">我是Content我是Content...</p>
      </b-collapse-panel>
      <b-collapse-panel title="Panel 3Title" name="3">
        <p v-for="i in 3" :key="i">我是Content我是Content...</p>
      </b-collapse-panel>
    </b-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

Container Component

Use the b-collapse-wrap component for standalone collapse panels.

Content goes here...

<template>
  <div>
    <b-collapse-wrap title="Title Bar" collapse>
      <div class="p5">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap title="Collapse with right action" collapse>
      <template #right>
        <b-button type="primary" plain size="small">Edit</b-button>
      </template>
      <div class="p5">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap v-model="value" shadow="none">
      <template #title>
        <div style="font-size: 16px; padding: 10px">Custom switch and title</div>
      </template>
      <template #right>
        <b-button type="text" @click="value = !value">{{ value ? 'Collapse' : 'Expand' }}</b-button>
      </template>
      <div class="p5">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </div>
    </b-collapse-wrap>
    <b-collapse-wrap title="Title Bar" collapse shadow="none" arrow-icon="caret-down">
      <template #title><span class="title">Custom label title</span></template>
      <div class="p5">
        <p v-for="i in 3" :key="i">Content goes here...</p>
      </div>
    </b-collapse-wrap>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(false)
</script>

Props

Parameter	Description	Type	Options	Default
modelValue	The name of the currently active panel; use v-model for two-way binding	Array/String	—	—
accordion	Enable accordion mode; only one panel can be expanded at a time	Boolean	—	false
simple	Enable simple mode	Boolean	—	false

Events

Event Name	Description	Return Value
change	Triggers when panels switch; returns the keys of currently expanded panels as an array	array[]

Slot

Name	Description
title	Panel header content

CollapseWrap Props

Parameter	Description	Type	Options	Default
value	Whether to expand	boolean	—	true
title	Title	string	—	—
collapse	Whether to expand/collapse	boolean	—	false
shadow	Shadow; set to none to enable simple mode	string	none/custom shadow	—

CollapseWrap Slot

Name	Description
title	Panel header content
right	Right side content area

Collapse ​

Basic Usage ​

Accordion ModeMode ​

Simple Mode and Custom Header ​

Container Component ​

Props ​

Events ​

Slot ​

CollapseWrap Props ​

CollapseWrap Slot ​