跳到主要内容

折叠面板 Collapse

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

API

安装使用​

{
  // 原生小程序
  "usingComponents": {
    "ti-collapse": "@titian-design/weapp/collapse/index",
    "ti-collapse-item": "@titian-design/weapp/collapse-item/index",
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-collapse": "platform://titian-mp/ti-collapse",
    "ti-collapse-item": "platform://titian-mp/ti-collapse-item"
  }
}

用法示例​

基本使用​

<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>
    <view slot="cell">我是标题</view>
    - 标题A下的内容 -
  </ti-collapse-item>
  <ti-collapse-item title="标题文字B">- 标题B下的内容 -</ti-collapse-item>
</ti-collapse>

设置默认展开​

<ti-collapse value="{{[0]}}">
  <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 options="{{options}}" />

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

<ti-collapse bind:close="{{handleClose}}" bind:open="{{handleOpen}}" bind:change="{{handleChange}}">
  <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 bind:close="{{handleClose}}" bind:open="{{handleOpen}}" bind:change="{{handleChange}}">
  <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 | number否null选中值-
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​

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

可扩展样式名 External Class​

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

ti-collapse-item API​

属性 Properties​

名称类型必填默认值说明备注
valuestring否null用来匹配父类 value，判断当前面板是否需要被展开，如果不传入，默认使用下标(index)-
titlestring否[]标题文字-
descstring否null内容文字-
iconstring否false左侧 icon-
right-iconstring否null右侧 icon-
disabledboolean否false是否禁用-
use-right-icon-slotboolean否false是否使用右侧 icon 插槽-
ext-stylestring否''容器样式-
dividerboolean否-是否展示分割线-
clickableboolean否-开启点击反馈-
use-cell-slotboolean否-常显示区域即cell组件部分区域，使用自定义插槽-

插槽 Slots​

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

可扩展样式名 External Class​

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

CSS 变量 CSS Variables​

变量默认值说明备注
--collapse-item-padding-v46rpx同collapse-item 组件--collapse-item-padding-v-
--collapse-item-padding-h28rpx同collapse-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--