Collapse - Vant 4

📂 Collapse

Create expandable content sections with smooth animations

🌟 Introduction

Transform your content organization with collapsible panels! Perfect for FAQs, settings menus, and content categorization. Click panel titles to elegantly expand or contract content sections.

📦 Installation

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 Examples

🌟 Basic Usage

Use v-model to control the name of active panels and create interactive content sections:

import { ref } from'vue'; exportdefault { setup() { const activeNames = ref(['1']); return { activeNames }; }, };

🎵 Accordion Mode

Create an elegant accordion where only one panel expands at a time - perfect for organized content flow:

import { ref } from'vue'; exportdefault { setup() { const activeName = ref('1'); return { activeName }; }, };

🚫 Disabled State

Use the disabled prop to disable specific CollapseItem panels when needed:

🎨 Custom Title

Using title slot to create beautifully customized panel headers:

import { ref } from'vue'; exportdefault { setup() { const activeNames = ref(['1']); return { activeNames }; }, };

🔄 Toggle All Panels

Using toggleAll method to programmatically control all panels at once:

import { ref } from'vue'; exportdefault { setup() { const activeNames = ref(['1']); const collapse = ref(null); constopenAll = () => { collapse.value.toggleAll(true); } consttoggleAll = () => { collapse.value.toggleAll(); }, return { activeNames, openAll, toggleAll, collapse, }; }, };

Tips: The toggleAll method cannot be used in accordion mode.

🔧 API Reference

🎛️ Collapse Props

Configure the main collapse container behavior:

Attribute	Description	Type	Default
v-model	Names of current active panels	accordion mode: *number	string*non-accordion mode: *(number
accordion	Whether to be accordion mode	boolean	false
border	Whether to show outer border	boolean	true

📡 Collapse Events

Listen to panel state changes:

Event	Description	Arguments
change	Emitted when switching panel	*activeNames: string

📦 CollapseItem Props

Customize individual collapse panel appearance and behavior:

Attribute	Description	Type	Default
name	Name	*number	string*
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	Whether to be readonly	boolean	false
is-link	Whether to show link icon	boolean	true
lazy-render	Whether to lazy render util opened	boolean	true
title-class	Title className	string	-
value-class	Value className	string	-
label-class	Label className	string	-

⚙️ Collapse Methods

Use ref to get Collapse instance and call powerful instance methods:

Name	Description	Attribute	Return value
toggleAll	Toggle the expanded status of all collapses	*options?: boolean	object*

toggleAll Usage

import { ref } from'vue'; import type { CollapseInstance } from'vant'; const collapseRef = ref<CollapseInstance>(); // Toggle all collapseRef.value?.toggleAll(); // Expand all collapseRef.value?.toggleAll(true); // UnExpand all collapseRef.value?.toggleAll(false); // Toggle all, skip disabled collapseRef.value?.toggleAll({ skipDisabled: true, }); // Expand all, skip disabled collapseRef.value?.toggleAll({ expanded: true, skipDisabled: true, });

⚙️ CollapseItem Methods

Use ref to get CollapseItem instance and call instance methods:

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

📝 Types

Access comprehensive TypeScript definitions for better development experience:

importtype { CollapseProps, CollapseItemProps, CollapseItemInstance, CollapseToggleAllOptions, } from'vant';

CollapseItemInstance is the type of component instance:

import { ref } from'vue'; importtype { CollapseItemInstance } from'vant'; const collapseItemRef = ref<CollapseItemInstance>(); collapseItemRef.value?.toggle();

🎰 CollapseItem Slots

Customize every aspect of your collapse panels with flexible slot options:

Name	Description
default	Content
title	Custom header title
value	Custom header value
label	Custom header label
icon	Custom header left icon
right-icon	Custom header right icon

🎨 Theming

🎯 CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-collapse-item-duration	var(--van-duration-base)	-
--van-collapse-item-content-padding	var(--van-padding-sm) var(--van-padding-md)	-
--van-collapse-item-content-font-size	var(--van-font-size-md)	-
--van-collapse-item-content-line-height	1.5	-
--van-collapse-item-content-text-color	var(--van-text-color-2)	-
--van-collapse-item-content-background	var(--van-background-2)	-
--van-collapse-item-title-disabled-color	var(--van-text-color-3)	-

📚 Related Docs

Explore more components and resources to enhance your development experience:

Content Organization

• Tabs - Horizontal content switching
• List - Scrollable content lists
• Card - Content cards with styling

Interactive Components

• ActionSheet - Bottom action panels
• Popup - Modal overlays and dialogs
• Dialog - Alert and confirmation dialogs

Navigation & Structure

• NavBar - Top navigation bars
• Sidebar - Side navigation menus
• TreeSelect - Hierarchical selection

Form Components

• Field - Input fields with validation
• Switch - Toggle switches
• Checkbox - Multiple selection options

Development Resources

• ConfigProvider - Global configuration and theming

External Links

• Vue 3 Template Refs - Learn about component references
• CSS Transitions - Smooth animation techniques