跳到主要内容

折叠面板 Collapse

可以折叠/展开的内容区域。

用法示例

基本使用

<ti-collapse>
<ti-collapse-item title="标题文字A">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

<!-- 设置手风琴模式 -->
<ti-collapse repel>
<ti-collapse-item title="标题文字A">- 设置手风琴模式 -</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

自定义标题部分,即cell组件区域

<ti-collapse>
<ti-collapse-item use-cell-slot>
<div slot="cell">我是标题</div>
- 标题A下的内容 -
</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

设置默认展开

<ti-collapse id="collapse">
<ti-collapse-item title="默认展开">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

设置图标

支持左右两侧分别设置图标

<ti-collapse icon="share-wechat-moments">
<ti-collapse-item title="标题文字A">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

<ti-collapse>
<ti-collapse-item icon="share-wechat-moments" title="标题文字A">
- 标题A下的内容 -
</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

<ti-collapse right-icon="share-wechat-moments">
<ti-collapse-item title="标题文字A">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

<ti-collapse>
<ti-collapse-item right-icon="share-wechat-moments" title="标题文字A">
- 标题A下的内容 -
</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

禁用面板

<ti-collapse disabled>
<ti-collapse-item title="标题文字A">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

<ti-collapse>
<ti-collapse-item disabled title="标题文字A">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

使用 options 属性创建面板

<ti-collapse id="collapse" />

监听展开、关闭、切换事件

<ti-collapse id="collapse">
<ti-collapse-item value="a" title="标题文字A">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item value="b" title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

<ti-collapse repel id="collapse-repel">
<ti-collapse-item value="a" title="标题文字A">- 标题A下的内容 -</ti-collapse-item>
<ti-collapse-item value="b" title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

ti-collapse API

属性 Properties

名称类型必填默认值说明备注
valueArray<string | number> | string | numbernull选中值-
optionsOptions[]-
iconstring-全局设置左侧 icon-
right-iconstring-全局设置右侧 icon-
disabledboolean-全局设置是否禁用-
repelboolean-是否手风琴模式-
dividerboolean-是否展示分割线-
clickableboolean-开启点击反馈-
ext-option-stylestring-子项容器样式

Options

详情可参考 [ti-cell 属性](详情可参考 ti-cell 属性

interface Options {
"clickable"?: boolean;
"desc"?: string;
"disabled"?: boolean;
"divider"?: boolean;
"icon"?: string;
"label"?: string;
"rightIcon"?: string;
"title": string;
"content": string;
"value"?: string | number;
}

事件 Events

名称参数描述备注
change(e: CustomEvent<string | number | Array<string | number>>) => void折叠面板选中值当为手风琴模式时返回值为 string | number,否则为 Array<string | number>
open(e: CustomEvent<string | number>) => void折叠面板展开事件-
close(e: CustomEvent<string | number>) => void折叠面板关闭事件-

可扩展样式名 External Class

类名说明备注
ext-option-class子项容器样式
ext-option-content-class子项容器折叠区样式

ti-collapse-item API

属性 Properties

名称类型必填默认值说明备注
valuestringnull用来匹配父类 value,判断当前面板是否需要被展开,如果不传入,默认使用下标(index)-
titlestring[]标题文字-
descstringnull内容文字-
iconstringfalse左侧 icon-
right-iconstringnull右侧 icon-
disabledbooleanfalse是否禁用-
use-right-icon-slotbooleanfalse是否使用右侧 icon 插槽-
ext-stylestring''容器样式-
dividerboolean-是否展示分割线-
clickableboolean-开启点击反馈-

插槽 Slots

名称说明备注
cell常显示区域插槽,配合use-cell-slot使用-
title文档-
icon左侧 icon-
right-icon右侧 icon-
desc内容-
default内容区默认插槽-

可扩展样式名 External Class

类名说明备注
ext-class容器样式

CSS 变量 CSS Variables

变量默认值说明备注
--collapse-item-padding-v46rpxcollapse-item 组件--collapse-item-padding-v-
--collapse-item-padding-h28rpxcollapse-item 组件--collapse-item-padding-h-
--collapse-item-text-colorvar(--neutral-color-3, #9e9e9e)collapse-item 组件--collapse-item-text-color-
--collapse-item-icon-colorvar(--neutral-color-4, #c4c4c4)collapse-item 组件--collapse-item-icon-color-
--collapse-item-cubic-beziercubic-bezier(0.48, 0.33, 0.24, 0.95)collapse-item 组件--collapse-item-cubic-bezier-
--collapse-item-cell-padding-v-collapse-item 组件--collapse-item-cell-padding-v-
--collapse-item-cell-padding-h-collapse-item 组件--collapse-item-cell-padding-h-
--collapse-item-cell-text-color-collapse-item 组件--collapse-item-cell-text-color-
--collapse-item-cell-title-text-color-collapse-item 组件--collapse-item-cell-title-text-color-
--collapse-item-cell-label-text-color-collapse-item 组件--collapse-item-cell-label-text-color-
--collapse-item-cell-desc-text-color-collapse-item 组件--collapse-item-cell-desc-text-color-
--collapse-item-cell-bg-color-collapse-item 组件--collapse-item-cell-bg-color-
--collapse-item-cell-right-icon-color-collapse-item 组件--collapse-item-cell-right-icon-color-
--collapse-item-cell-text-disabled-color-collapse-item 组件--collapse-item-cell-text-disabled-color-
--collapse-item-cell-hover-bg-color-collapse-item 组件--collapse-item-cell-hover-bg-color-
--collapse-item-line-height1.2--
--collapse-item-font-weight400--
--collapse-item-font-size24--