Collapse

introduce

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

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.

Collapse Props

Collapse Events

CollapseItem Props

Collapse method

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

CollapseItem method

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

CollapseItem Slots

Style variables

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