Collapse

introduce

Place a group of content in multiple accordion panels, and click the panel's title to expand or collapse its contents.

Code Demo

Basic usage

Control the expanded panel list through v-model, activeNames is in array format.

<z-collapse v-model="active1">
   <z-collapse-item title="Title 1">
     Zebra-swiper is a mobile carousel component developed based on uniapp.
   </z-collapse-item>
   <z-collapse-item title="Title 2">
     The zebraSwiper component mainly consists of z-swiper and z-swiper-item.
     Among them, the z-swiper-item component can only be placed in the z-swiper component.
   </z-collapse-item>
   <z-collapse-item title="Title 3">
     When using components, you can pass parameters to the components through props to achieve different configurations.
     Typically, configuration will be passed to components through the options object. Therefore, configuration items should be written into options.
     At the same time, you can also call component methods through $refs.
   </z-collapse-item>
</z-collapse>
const active1 = ref([0])

Accordion

Accordion mode can be set through accordion, and up to one panel can be expanded. At this time, activeName is in string format.

<z-collapse v-model="active2" accordion>
   <z-collapse-item title="Title 1">
     Zebra-swiper is a mobile carousel component developed based on uniapp.
   </z-collapse-item>
   <z-collapse-item title="Title 2">
     The zebraSwiper component mainly consists of z-swiper and z-swiper-item.
     Among them, the z-swiper-item component can only be placed in the z-swiper component.
   </z-collapse-item>
   <z-collapse-item title="Title 3">
     When using components, you can pass parameters to the components through props to achieve different configurations.
     Typically, configuration will be passed to components through the options object. Therefore, configuration items should be written into options.
     At the same time, you can also call component methods through $refs.
   </z-collapse-item>
</z-collapse>
const active2 = ref(0)

Disabled state

Disable individual panels via the disabled attribute.

<z-collapse v-model="active3">
   <z-collapse-item title="Title 1">
     Zebra-swiper is a mobile carousel component developed based on uniapp.
   </z-collapse-item>
   <z-collapse-item title="Title 2" disabled>
     The zebraSwiper component mainly consists of z-swiper and z-swiper-item.
     Among them, the z-swiper-item component can only be placed in the z-swiper component.
   </z-collapse-item>
   <z-collapse-item title="Title 3" disabled>
     When using components, you can pass parameters to the components through props to achieve different configurations.
     Typically, configuration will be passed to components through the options object. Therefore, configuration items should be written into options.
     At the same time, you can also call component methods through $refs.
   </z-collapse-item>
</z-collapse>

Custom title content

The content of the title bar can be customized through the title slot.

<z-collapse v-model="active4">
   <z-collapse-item>
     <template #title> Title 1<z-icon name="tag" /> </template>
     Zebra-swiper is a mobile carousel component developed based on uniapp.
   </z-collapse-item>
   <z-collapse-item title="Title 2" value="Content" icon="question-circle">
     The zebraSwiper component mainly consists of z-swiper and z-swiper-item.
     Among them, the z-swiper-item component can only be placed in the z-swiper component.
   </z-collapse-item>
</z-collapse>

Expand all and switch all

Expand all and toggle all can be achieved through the toggleAll method on the Collapse instance.

<z-collapse v-model="active5" ref="collapse">
   <z-collapse-item title="Title 1" name="1">
     Zebra-swiper is a mobile carousel component developed based on uniapp.
   </z-collapse-item>
   <z-collapse-item title="Title 2" name="2">
     The zebraSwiper component mainly consists of z-swiper and z-swiper-item.
     Among them, the z-swiper-item component can only be placed in the z-swiper component.
   </z-collapse-item>
   <z-collapse-item title="Title 3" name="3">
     When using components, you can pass parameters to the components through props to achieve different configurations.
     Typically, configuration will be passed to components through the options object. Therefore, configuration items should be written into options.
     At the same time, you can also call component methods through $refs.
   </z-collapse-item>
</z-collapse>
<view class="demo-collapse-buttons">
   <z-button type="primary" @click="openAll"> Expand all </z-button>
   <z-button
     type="primary"
     :custom-style="{ 'margin-left': '30rpx' }"
     @click="toggleAll"
   >
     Switch all
   </z-button>
</view>
import { ref } from 'vue';
const active5 = ref(['1'])
const collapse = ref()

const openAll = () => {
   collapse.value?.toggleAll?.(true)
}
const toggleAll = () => {
   collapse.value?.toggleAll?.()
}
.demo-collapse {
   &-buttons {
     margin-top: var(--z-padding-md);
   }
}

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

API

Collapse Props

ParametersDescriptionTypeDefault value
v-modelThe name of the currently expanded panelAccordion mode: number | string
Non-accordion mode: (number | string)
-
accordionWhether to enable accordion modebooleanfalse
borderWhether to display the outer borderbooleantrue

Collapse Events

Event nameDescriptionCallback parameters
changeTriggered when switching panelsactiveNames: The type is consistent with the value bound to v-model

CollapseItem Props

ParametersDescriptionTypeDefault value
nameUnique identifier, default is index valuenumber | stringindex
iconThe icon name or image link on the left side of the title bar, which is equivalent to the name attribute of the Icon componentstring-
sizeTitle bar size, optional value is largestring-
titleContent on the left side of the title barnumber | string-
valueContent on the right side of the title barnumber | string-
labeltitle bar description informationnumber | string-
borderWhether to display the inner borderbooleantrue
is-linkWhether to display the arrow on the right side of the title bar and enable click feedbackbooleantrue
disabledWhether to disable the panelbooleanfalse
readonlyWhether it is in read-only state. The panel cannot be operated in read-only statebooleanfalse
title-classAdditional class name for the left titlestring-
value-classAdditional class name for content on the rightstring-
label-classDescription information additional class namestring-

Collapse method

Through ref, you can get the CollapseItem instance and call the instance method.

Method nameDescriptionParametersReturn value
toggleAllToggle the expanded state of all panels, pass true to expand all, false to collapse all, pass no parameters to toggle alloptions?: boolean | object-

CollapseItem method

Through ref, you can get the CollapseItem instance and call the instance method.

Method nameDescriptionParametersReturn value
toggleSwitch the panel expansion state, pass true to expand, false to collapse, pass no parameter to toggleexpand?: boolean-

CollapseItem Slots

NameDescription
defaultpanel content
titleCustomize the title bar on the left sidecapacity
valueCustomize the content on the right side of the title bar
labelCustom title bar description information
iconCustomize the icon on the left side of the title bar
right-iconCustomize the icon on the right side of the title bar

Theme customization

Style variables

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

NameDefaultDescription
--z-collapse-item-durationvar(--z-duration-base)-
--z-collapse-item-content-paddingvar(--z-padding-sm) var(--z-padding-md)-
--z-collapse-item-content-font-sizevar(--z-font-size-md)-
--z-collapse-item-content-line-height1.5-
--z-collapse-item-content-text-colorvar(--z-text-color-2)-
--z-collapse-item-content-backgroundvar(--z-background-2)-
--z-collapse-item-title-disabled-colorvar(--z-text-color-3)-