Collapse 折叠面板

介绍

将较长的内容区域进行折叠/展开操作，由 TnCollapse 和 TnCollapseItem 组合使用。支持手风琴模式、多面板展开、自定义箭头、图标标题及禁用状态。

引入

typescript

import { TnCollapse, TnCollapseItem } from "@tuniao/tn-ui";

代码演示

基础用法

默认手风琴模式，同时只展开一个面板。通过 value 设置默认展开的面板，通过 $value 实现双向绑定。

基础用法

点我查看代码

typescript

@Local accordionValue: number = 0;

TnCollapse({
  groupId: "basic",
  value: this.accordionValue,
  $value: (val: number | number[]) => { this.accordionValue = val as number; }
}) {
  TnCollapseItem({ groupId: "basic", name: 0, title: "标题一" }) {
    Text("这是第一个面板的内容。折叠面板可以将较长的内容区域进行折叠/展开操作。")
  }
  TnCollapseItem({ groupId: "basic", name: 1, title: "标题二" }) {
    Text("这是第二个面板的内容。手风琴模式下，展开当前面板会自动关闭其他面板。")
  }
  TnCollapseItem({ groupId: "basic", name: 2, title: "标题三" }) {
    Text("这是第三个面板的内容。可以通过 value 属性控制默认展开的面板。")
  }
}

多面板展开

设置 accordion 为 false，允许同时展开多个面板。此时 value 为数组类型。

多面板展开

点我查看代码

typescript

@Local multipleValue: number[] = [0];

TnCollapse({
  groupId: "multiple",
  value: this.multipleValue,
  accordion: false,
  $value: (val: number | number[]) => { this.multipleValue = val as number[]; }
}) {
  TnCollapseItem({ groupId: "multiple", name: 0, title: "标题一" }) {
    Text("第一个面板的内容，可以与其他面板同时展开。")
  }
  TnCollapseItem({ groupId: "multiple", name: 1, title: "标题二" }) {
    Text("第二个面板的内容，设置 accordion 为 false 即可开启多选模式。")
  }
  TnCollapseItem({ groupId: "multiple", name: 2, title: "标题三" }) {
    Text("第三个面板的内容，value 为数组类型。")
  }
}

自定义箭头颜色

通过 arrowColor 属性设置折叠箭头的颜色。

点我查看代码

typescript

@Local arrowColorValue: number = -1;

TnCollapse({
  groupId: "arrowColor",
  value: this.arrowColorValue,
  arrowColor: getThemeColor(this.baseStyle, "primary"),
  $value: (val: number | number[]) => { this.arrowColorValue = val as number; }
}) {
  TnCollapseItem({ groupId: "arrowColor", name: 0, title: "主题色箭头" }) {
    Text("箭头使用了主题色。")
  }
  TnCollapseItem({ groupId: "arrowColor", name: 1, title: "主题色箭头" }) {
    Text("所有面板的箭头颜色统一设置。")
  }
}

隐藏箭头

设置 showArrow 为 false 隐藏折叠箭头图标。

点我查看代码

typescript

@Local hideArrowValue: number = 0;

TnCollapse({
  groupId: "hideArrow",
  value: this.hideArrowValue,
  showArrow: false,
  $value: (val: number | number[]) => { this.hideArrowValue = val as number; }
}) {
  TnCollapseItem({ groupId: "hideArrow", name: 0, title: "无箭头面板一" }) {
    Text("隐藏箭头后，用户可以通过点击标题区域展开/收起。")
  }
  TnCollapseItem({ groupId: "hideArrow", name: 1, title: "无箭头面板二" }) {
    Text("适用于不需要箭头指示的简洁场景。")
  }
}

禁用面板

通过 TnCollapseItem 的 disabled 属性禁用某个面板，禁用后不可展开/收起。

禁用面板

点我查看代码

typescript

@Local disabledValue: number = 0;

TnCollapse({
  groupId: "disabled",
  value: this.disabledValue,
  $value: (val: number | number[]) => { this.disabledValue = val as number; }
}) {
  TnCollapseItem({ groupId: "disabled", name: 0, title: "正常面板" }) {
    Text("此面板可正常展开和收起。")
  }
  TnCollapseItem({ groupId: "disabled", name: 1, title: "禁用面板", disabled: true }) {
    Text("此面板被禁用，无法点击展开。")
  }
  TnCollapseItem({ groupId: "disabled", name: 2, title: "正常面板" }) {
    Text("此面板可正常展开和收起。")
  }
}

带图标标题

通过 TnCollapseItem 的 icon 和 iconColor 属性设置标题左侧图标。

点我查看代码

typescript

@Local customTitleValue: number = -1;

TnCollapse({
  groupId: "customTitle",
  value: this.customTitleValue,
  $value: (val: number | number[]) => { this.customTitleValue = val as number; }
}) {
  TnCollapseItem({
    groupId: "customTitle",
    name: 0,
    title: "收藏夹",
    icon: "star-fill",
    iconColor: $r("app.color.tn_color_warning")
  }) {
    Text("标题左侧可以显示图标，支持自定义图标颜色。")
  }
  TnCollapseItem({
    groupId: "customTitle",
    name: 1,
    title: "相册",
    icon: "photo",
    iconColor: getThemeColor(this.baseStyle, "primary")
  }) {
    Text("可以为每个面板设置不同的图标和颜色。")
  }
}

无边框模式

设置 hasBorder 为 false 隐藏面板之间的分割线。

无边框模式

点我查看代码

typescript

@Local noBorderValue: number = 0;

TnCollapse({
  groupId: "noBorder",
  value: this.noBorderValue,
  hasBorder: false,
  $value: (val: number | number[]) => { this.noBorderValue = val as number; }
}) {
  TnCollapseItem({ groupId: "noBorder", name: 0, title: "无边框面板一" }) {
    Text("隐藏分割线后呈现更加简洁的外观。")
  }
  TnCollapseItem({ groupId: "noBorder", name: 1, title: "无边框面板二" }) {
    Text("适用于需要紧凑布局的场景。")
  }
  TnCollapseItem({ groupId: "noBorder", name: 2, title: "无边框面板三" }) {
    Text("面板之间没有分割线。")
  }
}

自定义内容

面板内容区域可以放置任意组件，如图标列表、图片网格等。

自定义内容

点我查看代码

typescript

@Local customContentValue: number[] = [0];

TnCollapse({
  groupId: "customContent",
  value: this.customContentValue,
  accordion: false,
  $value: (val: number | number[]) => { this.customContentValue = val as number[]; }
}) {
  TnCollapseItem({ groupId: "customContent", name: 0, title: "图标列表" }) {
    Column({ space: this.baseStyle.spaceXsm }) {
      Row({ space: this.baseStyle.spaceXsm }) {
        TnIcon({ name: "home" });
        Text("首页")
      }
      Row({ space: this.baseStyle.spaceXsm }) {
        TnIcon({ name: "my" });
        Text("个人中心")
      }
      Row({ space: this.baseStyle.spaceXsm }) {
        TnIcon({ name: "setting" });
        Text("系统设置")
      }
    }
  }
  TnCollapseItem({ groupId: "customContent", name: 1, title: "图片展示" }) {
    Row({ space: this.baseStyle.spaceXsm }) {
      ForEach([1, 2, 3], (item: number) => {
        Column()
          .width(80)
          .height(80)
          .borderRadius(this.baseStyle.borderRadiusLg)
          .backgroundColor($r("app.color.tn_color_gray_disabled"))
      })
    }
  }
}

事件回调

通过 onChange 监听展开/收起事件，手风琴模式返回 number，多选模式返回 number[]。

点我查看代码

typescript

@Local eventValue: number = -1;
@Local changeLog: string = "";

TnCollapse({
  groupId: "event",
  value: this.eventValue,
  $value: (val: number | number[]) => { this.eventValue = val as number; },
  onChange: (val: number | number[]) => {
    if (Array.isArray(val)) {
      this.changeLog = `当前展开: [${val.join(", ")}]`;
    } else {
      this.changeLog = val === -1 ? "全部关闭" : `当前展开: ${val}`;
    }
  }
}) {
  TnCollapseItem({ groupId: "event", name: 0, title: "面板一" }) {
    Text("点击标题区域可以触发 onChange 回调。")
  }
  TnCollapseItem({ groupId: "event", name: 1, title: "面板二" }) {
    Text("onChange 回调返回当前展开面板的标识。")
  }
  TnCollapseItem({ groupId: "event", name: 2, title: "面板三" }) {
    Text("手风琴模式返回 number，多选模式返回 number[]。")
  }
}

API

TnCollapse Props

参数	说明	类型	默认值
groupId	分组标识，须与所有子组件 TnCollapseItem 的 groupId 一致	`string`	`""`
value	当前展开面板标识，手风琴模式为 number，多选模式为 number[]，-1 表示全部关闭	`number \| number[]`	`-1`
accordion	是否开启手风琴模式（同时只展开一个面板）	`boolean`	`true`
showArrow	是否显示折叠箭头图标	`boolean`	`true`
arrowColor	折叠箭头颜色，为空时使用默认颜色	`ResourceColor`	`""`
hasBorder	是否显示面板之间的分割线	`boolean`	`true`

TnCollapse Events

事件名	说明	回调参数
onChange	展开状态变化时触发	`(value: number \| number[]) => void`
$value	双向绑定回调，用于同步展开状态	`(value: number \| number[]) => void`

TnCollapse Slots

名称	说明
defaultBuilder	默认内容插槽，用于放置 TnCollapseItem 子组件，通过尾随闭包传入

TnCollapseItem Props

参数	说明	类型	默认值
groupId	分组标识，必须与父组件 TnCollapse 的 groupId 一致	`string`	`""`
name	面板唯一标识，用于区分不同面板	`number`	`0`
title	面板标题文字	`ResourceStr`	`""`
disabled	是否禁用该面板（禁用后不可展开/收起）	`boolean`	`false`
icon	标题左侧图标名称（使用 TnIcon 组件图标）	`string`	`""`
iconColor	标题左侧图标颜色，为空时使用默认颜色	`ResourceColor`	`""`

TnCollapseItem Slots

名称	说明
defaultBuilder	面板内容插槽，用于放置展开后显示的内容，通过尾随闭包传入

Collapse 折叠面板 ​

介绍 ​

引入 ​

代码演示 ​

基础用法 ​

多面板展开 ​

自定义箭头颜色 ​

隐藏箭头 ​

禁用面板 ​

带图标标题 ​

无边框模式 ​

自定义内容 ​

事件回调 ​

API ​

TnCollapse Props ​

TnCollapse Events ​

TnCollapse Slots ​

TnCollapseItem Props ​

TnCollapseItem Slots ​

Collapse 折叠面板

介绍

引入

代码演示

基础用法

多面板展开

自定义箭头颜色

隐藏箭头

禁用面板

带图标标题

无边框模式

自定义内容

事件回调

API

TnCollapse Props

TnCollapse Events

TnCollapse Slots

TnCollapseItem Props

TnCollapseItem Slots