Place a group of content in multiple collapsible panels, click the title of the panel to expand or contract its content.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Collapse, CollapseItem } from 'vant';\n\nconst app = createApp();\napp.use(Collapse);\napp.use(CollapseItem);\nUse v-model to control the name of active panels.
<van-collapse v-model="activeNames">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\nIn accordion mode, only one panel can be expanded at the same time.
\n<van-collapse v-model="activeName" accordion>\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeName = ref('1');\n return { activeName };\n },\n};\nUse the disabled prop to disable CollapseItem.
<van-collapse v-model="activeNames">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2" disabled>\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3" disabled>\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\nUsing title slot to custom title.
<van-collapse v-model="activeNames">\n <van-collapse-item name="1">\n <template #title>\n <div>Title1 <van-icon name="question-o" /></div>\n </template>\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2" icon="shop-o">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n</van-collapse>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n return { activeNames };\n },\n};\nUsing toggleAll method to toggle all items.
<van-collapse v-model="activeNames" ref="collapse">\n <van-collapse-item title="Title1" name="1">\n The code is written for people to see and can be run on a machine.\n </van-collapse-item>\n <van-collapse-item title="Title2" name="2">\n Technology is nothing more than the common soul of those who develop it.\n </van-collapse-item>\n <van-collapse-item title="Title3" name="3">\n The frequency of people swearing during code reading is the only measure of\n code quality.\n </van-collapse-item>\n</van-collapse>\n\n<van-button type="primary" @click="openAll">Open All</van-button>\n<van-button type="primary" @click="toggleAll">Toggle All</van-button>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const activeNames = ref(['1']);\n const collapse = ref(null);\n\n const openAll = () => {\n collapse.value.toggleAll(true);\n }\n const toggleAll = () => {\n collapse.value.toggleAll();\n },\n\n return {\n activeNames,\n openAll,\n toggleAll,\n collapse,\n };\n },\n};\n\n\nTips: The toggleAll method cannot be used in accordion mode.
\n
| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model | \nNames of current active panels | \naccordion mode: number | string non-accordion mode: (number | string)[] | \n- | \n
| accordion | \nWhether to be accordion mode | \nboolean | \nfalse | \n
| border | \nWhether to show outer border | \nboolean | \ntrue | \n
| Event | \nDescription | \nArguments | \n
|---|---|---|
| change | \nEmitted when switching panel | \nactiveNames: string | number | Array<string | number> | \n
| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| name | \nName | \nnumber | string | \nindex | \n
| icon | \nLeft Icon | \nstring | \n- | \n
| size | \nTitle size, can be set to large | \nstring | \n- | \n
| title | \nTitle | \nnumber | string | \n- | \n
| value | \nRight text | \nnumber | string | \n- | \n
| label | \nDescription below the title | \nstring | \n- | \n
| border | \nWhether to show inner border | \nboolean | \ntrue | \n
| disabled | \nWhether to disabled collapse | \nboolean | \nfalse | \n
| readonly | \nWhether to be readonly | \nboolean | \nfalse | \n
| is-link | \nWhether to show link icon | \nboolean | \ntrue | \n
| lazy-render | \nWhether to lazy render util opened | \nboolean | \ntrue | \n
| title-class | \nTitle className | \nstring | \n- | \n
| value-class | \nValue className | \nstring | \n- | \n
| label-class | \nLabel className | \nstring | \n- | \n
Use ref to get Collapse instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| toggleAll | \nToggle the expanded status of all collapses | \noptions?: boolean | object | \n- | \n
import { ref } from 'vue';\nimport type { CollapseInstance } from 'vant';\n\nconst collapseRef = ref<CollapseInstance>();\n\n// Toggle all\ncollapseRef.value?.toggleAll();\n// Expand all\ncollapseRef.value?.toggleAll(true);\n// UnExpand all\ncollapseRef.value?.toggleAll(false);\n\n// Toggle all, skip disabled\ncollapseRef.value?.toggleAll({\n skipDisabled: true,\n});\n// Expand all, skip disabled\ncollapseRef.value?.toggleAll({\n expanded: true,\n skipDisabled: true,\n});\nUse ref to get CollapseItem instance and call instance methods.
\n| Name | \nDescription | \nAttribute | \nReturn value | \n
|---|---|---|---|
| toggle | \nToggle expanded status | \nexpanded: boolean | \n- | \n
The component exports the following type definitions:
\nimport type {\n CollapseProps,\n CollapseItemProps,\n CollapseItemInstance,\n CollapseToggleAllOptions,\n} from 'vant';\nCollapseItemInstance is the type of component instance:
import { ref } from 'vue';\nimport type { CollapseItemInstance } from 'vant';\n\nconst collapseItemRef = ref<CollapseItemInstance>();\n\ncollapseItemRef.value?.toggle();\n| Name | \nDescription | \n
|---|---|
| default | \nContent | \n
| title | \nCustom header title | \n
| value | \nCustom header value | \n
| label | \nCustom header label | \n
| icon | \nCustom header left icon | \n
| right-icon | \nCustom header right icon | \n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-collapse-item-duration | \nvar(--van-duration-base) | \n- | \n
| --van-collapse-item-content-padding | \nvar(--van-padding-sm) var(--van-padding-md) | \n- | \n
| --van-collapse-item-content-font-size | \nvar(--van-font-size-md) | \n- | \n
| --van-collapse-item-content-line-height | \n1.5 | \n- | \n
| --van-collapse-item-content-text-color | \nvar(--van-text-color-2) | \n- | \n
| --van-collapse-item-content-background | \nvar(--van-background-2) | \n- | \n
| --van-collapse-item-title-disabled-color | \nvar(--van-text-color-3) | \n- | \n