Collapse

Place a set of content in multiple collapsible panels, click panel title to expand or collapse content.

Component Type

Basic Usage

v-model binding value can be:

• Normal collapse: string[]
• Accordion mode: string
• View more mode: boolean

<wd-collapse v-model="value">
  <wd-collapse-item title="Tag 1" name="item1">This is a simple example text.</wd-collapse-item>
  <wd-collapse-item title="Tag 2" name="item2">This is a simple example text.</wd-collapse-item>
</wd-collapse>

Component State

Disabled

Set wd-collapse-item disabled property to disable a single panel.

<wd-collapse v-model="value">
  <wd-collapse-item title="Tag 1" name="item1">This is a simple example text.</wd-collapse-item>
  <wd-collapse-item title="Tag 2" name="item2" disabled>This is a simple example text.</wd-collapse-item>
</wd-collapse>

Async Update

Execute interception before panel opens through before-expend, return boolean or Promise<boolean>.

<wd-collapse v-model="value">
  <wd-collapse-item v-for="item in itemList" :key="item.name" :title="item.title" :name="item.name" :before-expend="beforeExpend">
    {{ item.body }}
  </wd-collapse-item>
</wd-collapse>

const beforeExpend = (name: string) => {
  return new Promise<boolean>((resolve) => {
    setTimeout(() => resolve(true), 500)
  })
}

Component Variant

Accordion

Set accordion to expand only one item at the same time.

<wd-collapse v-model="value" accordion>
  <wd-collapse-item title="Tag 1" name="item1">This is a simple example text.</wd-collapse-item>
  <wd-collapse-item title="Tag 2" name="item2">This is a simple example text.</wd-collapse-item>
  <wd-collapse-item title="Tag 3" name="item3">This is a simple example text.</wd-collapse-item>
</wd-collapse>

View More

Set viewmore to collapse long text, line-num controls collapsed line count.

<wd-collapse v-model="value" viewmore :line-num="3">
  This is a simple example text. This is a simple example text. This is a simple example text. This is a simple example text.
</wd-collapse>

Component Style

Custom Title

Use wd-collapse-item title named slot, can get expanded / disabled / isFirst.

<wd-collapse v-model="value">
  <wd-collapse-item name="item1">
    <template #title="{ expanded }">
      <view class="header">
        <text style="color: red">Custom title through slot</text>
        <text>{{ expanded ? 'I am expanded' : 'I am collapsed' }}</text>
      </view>
    </template>
    This is a simple example text.
  </wd-collapse-item>
</wd-collapse>

View More Slot

In view more mode, use-more-slot can enable more slot to customize "expand/collapse" area.

<wd-collapse v-model="value" viewmore use-more-slot custom-more-slot-class="more-slot">
  This is a simple example text. This is a simple example text. This is a simple example text.
  <template #more>
    <view>Show All</view>
  </template>
</wd-collapse>

Special Style

Nested Usage

collapse supports nesting. Since collapse-item content container has default padding, it is recommended to use custom-body-style or custom-body-class to override when nesting.

Tip

custom-body-style and custom-body-class are supported in version ^(1.4.0) and above.

<wd-collapse v-model="collapseRoot">
  <wd-collapse-item v-for="item in 5" :key="item" :name="`${item}`" :title="`Tag${item}`" custom-body-style="padding:0 0 0 14px">
    <wd-collapse v-model="collapseList[item - 1]">
      <wd-collapse-item v-for="child in itemList" :key="child.name" :name="child.name" :title="child.title">
        {{ child.body }}
      </wd-collapse-item>
    </wd-collapse>
  </wd-collapse-item>
</wd-collapse>

toggleAll

Batch toggle expand status through Collapse instance method toggleAll.

<wd-collapse ref="collapseRef">...</wd-collapse>

collapseRef.value?.toggleAll()
collapseRef.value?.toggleAll(true)
collapseRef.value?.toggleAll(false)
collapseRef.value?.toggleAll({ skipDisabled: true })
collapseRef.value?.toggleAll({ expanded: true, skipDisabled: true })

CollapseItem Attributes

Parameter	Description	Type	Default Value
name	Collapse item unique identifier	string	-
title	Collapse item title, supports title slot override	string	''
disabled	Whether to disable this collapse item	boolean	false
before-expend	Pre-open interception function, receives name parameter, returns boolean or Promise<boolean>	CollapseItemBeforeExpand	-
border	Whether to show border	boolean	true
custom-body-class v1.4.0	Collapse item content container custom class name	string	''
custom-body-style v1.4.0	Collapse item content container custom style	string	''
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

CollapseItemBeforeExpand Parameters

Parameter Name	Description	Type
name	Current collapse item unique identifier	string

Collapse Attributes

Parameter	Description	Type	Default Value
v-model	Binding value. Normal mode is string[], accordion mode is string, view more mode is boolean	string | string[] | boolean	-
accordion	Whether to enable accordion mode	boolean	false
viewmore	Whether to enable view more mode	boolean	false
use-more-slot	Whether to enable more slot in view more mode	boolean	false
line-num	Collapsed display line count in view more mode	number	2
custom-more-slot-class	more slot external custom class name in view more mode	string	''
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Events

Event Name	Description	Parameters
change	Triggered when binding value changes	{ value }

Methods

Method Name	Description	Parameters
toggleAll	Toggle all panel expand status. Pass true to expand all, false to collapse all, no parameter to toggle all	options?: CollapseToggleAllOptions

CollapseToggleAllOptions

Parameter Name	Description	Type	Default Value
expanded	Whether to expand, true to expand, false to collapse	boolean	-
skipDisabled	Whether to skip disabled items	boolean	false

Collapse Slots

name	Description	Parameters
default	Panel content or panel item list	-
more	Custom expand/collapse area in view more mode	-

CollapseItem Slots

name	Description	Parameters
title	Custom title area	{ expanded, disabled, isFirst }
default	Collapse item content	-

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-collapse-bg	$filled-oppo	折叠面板背景颜色
--wot-collapse-body-color	$text-auxiliary	折叠内容文字颜色
--wot-collapse-body-font-size	$typography-label-size-large	折叠内容文字字号
--wot-collapse-padding	$padding-loose	折叠容器左右内边距
--wot-collapse-body-padding	$padding-extra-loose $padding-loose	折叠内容区域内边距
--wot-collapse-title-color	$text-main	折叠标题文字颜色
--wot-collapse-title-font-size	$typography-body-size-extra-large	折叠标题文字字号
--wot-collapse-arrow-size	$n-16	折叠箭头尺寸
--wot-collapse-arrow-color	$icon-main	折叠箭头颜色
--wot-collapse-more-font-size	$typography-body-size-main	更多按钮文字字号
--wot-collapse-more-color	$primary-6	更多按钮文字颜色
--wot-collapse-more-margin-top	$spacing-main	更多按钮上边距
--wot-collapse-more-text-margin-right	$spacing-super-tight	更多按钮文字右侧间距
--wot-collapse-item-header-padding	$padding-extra-loose	折叠项头部内边距
--wot-collapse-item-title-color	$text-main	折叠项标题文字颜色
--wot-collapse-item-title-font-size	$typography-body-size-extra-large	折叠项标题文字字号
--wot-collapse-item-title-line-height	$typography-body-line--height-size-extra-large	折叠项标题文字行高
--wot-collapse-item-arrow-size	$n-16	折叠项箭头尺寸
--wot-collapse-item-arrow-color	$icon-secondary	折叠项箭头颜色
--wot-collapse-item-body-color	$text-auxiliary	折叠项内容文字颜色
--wot-collapse-item-body-font-size	$typography-label-size-large	折叠项内容文字字号
--wot-collapse-item-body-line-height	$typography-label-line--height-size-large	折叠项内容文字行高
--wot-collapse-item-body-padding	$padding-loose $padding-extra-loose	折叠项内容区域内边距

Source Code

Documentation

• Component