vant/src/collapse

Collapse

Intro

Place a group of content in multiple collapsible panels, click the title of the panel to expand or contract its content.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Collapse, CollapseItem } from 'vant';

const app = createApp();
app.use(Collapse);
app.use(CollapseItem);

Usage

Basic Usage

Use v-model to control the name of active panels.

<van-collapse v-model="activeNames">
  <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
  <van-collapse-item title="Title2" name="2">Content</van-collapse-item>
  <van-collapse-item title="Title3" name="3">Content</van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    return { activeNames };
  },
};

Accordion

In accordion mode, only one panel can be expanded at the same time.

<van-collapse v-model="activeName" accordion>
  <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
  <van-collapse-item title="Title2" name="2">Content</van-collapse-item>
  <van-collapse-item title="Title3" name="3">Content</van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeName = ref('1');
    return { activeName };
  },
};

Disabled

Use the disabled prop to disable CollapseItem.

<van-collapse v-model="activeNames">
  <van-collapse-item title="Title1" name="1">Content</van-collapse-item>
  <van-collapse-item title="Title2" name="2" disabled>
    Content
  </van-collapse-item>
  <van-collapse-item title="Title3" name="3" disabled>
    Content
  </van-collapse-item>
</van-collapse>

Custom title

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <template #title>
      <div>Title1 <van-icon name="question-o" /></div>
    </template>
    Content
  </van-collapse-item>
  <van-collapse-item title="Title2" name="2" icon="shop-o">
    Content
  </van-collapse-item>
</van-collapse>

import { ref } from 'vue';

export default {
  setup() {
    const activeNames = ref(['1']);
    return { activeNames };
  },
};

API

Collapse Props

Attribute	Description	Type	Default
v-model	Names of current active panels	accordion mode： number | string non-accordion mode：(number | string)[]	-
accordion	Whether to be accordion mode	boolean	false
border	Whether to show outer border	boolean	true

Collapse Events

Event	Description	Arguments
change	Emitted when switching panel	activeNames

CollapseItem Props

Attribute	Description	Type	Default
name	Name	number | string	index
icon	Left Icon	string	-
size	Title size，can be set to large	string	-
title	Title	number | string	-
value	Right text	number | string	-
label	Description below the title	string	-
border	Whether to show inner border	boolean	true
disabled	Whether to disabled collapse	boolean	false
readonly v3.0.12	Whether to be readonly	boolean	false
is-link	Whether to show link icon	boolean	true
title-class	Title className	string	-
value-class	Value className	string	-
label-class	Label className	string	-

CollapseItem Slots

Name	Description
default	Content
value	Custom value
icon	Custom icon
title	Custom title
right-icon	Custom right icon

CollapseItem Methods

Use ref to get CollapseItem instance and call instance methods.

Name	Description	Attribute	Return value
toggle	Toggle expanded status	expanded: boolean	-

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@collapse-item-transition-duration	@animation-duration-base	-
@collapse-item-content-padding	@padding-sm @padding-md	-
@collapse-item-content-font-size	@font-size-md	-
@collapse-item-content-line-height	1.5	-
@collapse-item-content-text-color	@gray-6	-
@collapse-item-content-background-color	@white	-
@collapse-item-title-disabled-color	@gray-5	-