Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

import { IBestCollapse, IBestCollapseItem } from "@ibestservices/ibest-ui";

代码演示

基础用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State activeName: string[] = ['1']
  @State groupId: string = 'group'
  build() {
    IBestCollapse({groupId: this.groupId, activeName: this.activeName}){
      IBestCollapseItem({
        groupId: this.groupId,
        name: '1',
        index: 0,
        title: '标题1'
      }){
        Text('代码是写出来给人看的，附带能在机器上运行。').fontSize(14).fontColor("#969799")
      }
      IBestCollapseItem({
        groupId: this.groupId,
        name: '2',
        index: 1,
        title: '标题2'
      }){
        Text('技术无非就是那些开发它的人的共同灵魂。').fontSize(14).fontColor("#969799")
      }
      IBestCollapseItem({
        groupId: this.groupId,
        name: '3',
        index: 2,
        title: '标题3'
      }){
        Text('在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。').fontSize(14).fontColor("#969799")
      }
    }
  }
}

手风琴

点我查看代码

@Entry
@Component
struct DemoPage {
  @State activeName: string = '1'
  @State groupId: string = 'group'
  build() {
    IBestCollapse({groupId: this.groupId, activeName: this.activeName, accordion: true}){
      IBestCollapseItem({
        groupId: this.groupId,
        name: '1',
        index: 0,
        title: '标题1'
      }){
        Text('代码是写出来给人看的，附带能在机器上运行。').fontSize(14).fontColor("#969799")
      }
      IBestCollapseItem({
        groupId: this.groupId,
        name: '2',
        index: 1,
        title: '标题2'
      }){
        Text('技术无非就是那些开发它的人的共同灵魂。').fontSize(14).fontColor("#969799")
      }
      IBestCollapseItem({
        groupId: this.groupId,
        name: '3',
        index: 2,
        title: '标题3'
      }){
        Text('在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。').fontSize(14).fontColor("#969799")
      }
    }
  }
}

禁用状态

点我查看代码

@Entry
@Component
struct DemoPage {
  @State activeName: string[] = ['2']
  @State groupId: string = 'group'
  build() {
    IBestCollapse({groupId: this.groupId, activeName: this.activeName}){
      IBestCollapseItem({
        groupId: this.groupId,
        name: '1',
        index: 0,
        title: '标题1'
      }){
        Text('代码是写出来给人看的，附带能在机器上运行。').fontSize(14).fontColor("#969799")
      }
      IBestCollapseItem({
        groupId: this.groupId,
        name: '2',
        index: 1,
        title: '标题2',
        disabled: true
      }){
        Text('技术无非就是那些开发它的人的共同灵魂。').fontSize(14).fontColor("#969799")
      }
      IBestCollapseItem({
        groupId: this.groupId,
        name: '3',
        index: 2,
        title: '标题3'
      }){
        Text('在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。').fontSize(14).fontColor("#969799")
      }
    }
  }
}

自定义标题

点我查看代码

@Entry
@Component
struct DemoPage {
  @State activeName: string[] = ['1']
  @State groupId: string = 'group'
  build() {
    IBestCollapse({groupId: this.groupId, activeName: this.activeName}){
      IBestCollapseItem({
        groupId: this.groupId,
        name: '1',
        index: 0,
        icon: $r("app.media.icon_like"),
        title: '标题1',
        value: "右侧内容"
      }){
        Text('代码是写出来给人看的，附带能在机器上运行。').fontSize(14).fontColor("#969799")
      }
    }
  }
}

实例方法

点我查看代码

import { IBestCollapseController } from '@ibestservices/ibest-ui';

@Entry
@Component
struct DemoPage {
  @State activeName: string[] = ['2']
  @State groupId: string = 'group'
  private controller: IBestCollapseController = new IBestCollapseController()
  build() {
    Column{
      IBestCollapse({
        groupId: this.groupId,
        activeName: this.activeName,
        controller: this.controller
      }){
        IBestCollapseItem({
          groupId: this.groupId,
          name: '1',
          index: 0,
          title: '标题1'
        }){
          Text('代码是写出来给人看的，附带能在机器上运行。').fontSize(14).fontColor("#969799")
        }
        IBestCollapseItem({
          groupId: this.groupId,
          name: '2',
          index: 1,
          title: '标题2',
          disabled: true
        }){
          Text('技术无非就是那些开发它的人的共同灵魂。').fontSize(14).fontColor("#969799")
        }
        IBestCollapseItem({
          groupId: this.groupId,
          name: '3',
          index: 2,
          title: '标题3'
        }){
          Text('在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。').fontSize(14).fontColor("#969799")
        }
      }
      Column(){
        Row({space: 16}){
          IBestButton({
            type: "primary",
            text: "全部展开",
            buttonSize: "small",
            onClickBtn: () => {
              this.controller.toggleAll(true)
            }
          })
          IBestButton({
            type: "primary",
            text: "全部收起",
            buttonSize: "small",
            onClickBtn: () => {
              this.controller.toggleAll(false)
            }
          })
          IBestButton({
            type: "primary",
            text: "切换",
            buttonSize: "small",
            onClickBtn: () => {
              this.controller.toggleAll()
            }
          })
        }
        .padding({top: 16, left: 16})
        Row({space: 16}){
          IBestButton({
            type: "primary",
            text: "跳过禁用展开",
            buttonSize: "small",
            onClickBtn: () => {
              this.controller.toggleAll({
                expanded: true,
                skipDisabled: true
              })
            }
          })
          IBestButton({
            type: "primary",
            text: "跳过禁用收起",
            buttonSize: "small",
            onClickBtn: () => {
              this.controller.toggleAll({
                expanded: false,
                skipDisabled: true
              })
            }
          })
          IBestButton({
            type: "primary",
            text: "跳过禁用切换",
            buttonSize: "small",
            onClickBtn: () => {
              this.controller.toggleAll({
                skipDisabled: true
              })
            }
          })
        }
        .padding({top: 16, left: 16})
      }
    }
  }
}

API

IBestCollapse @Props

参数	说明	类型	默认值
groupId	分组id, 需保证全局唯一性	string	`''`
activeName	当前展开面板的name	手风琴模式：string 非手风琴模式：string \| string[]	`[]`
accordion	是否开启手风琴模式	boolean	`false`
isShowBorder	是否显示外边框	boolean	`true`
controller	实例方法	IBestCollapseController	`-`

IBestCollapse 插槽

插槽名	说明	类型
defaultBuilder	默认内容	CustomBuilder

IBestCollapse Events

事件名	说明	回调参数
onChange	面板状态变化回调	`name: string \| string[]`

IBestCollapseController 实例方法

方法名	说明	参数	默认值
toggleAll	切换所有面板状态, 传 true 为全部展开，false 为全部收起，不传参为全部切换	`option?: boolean \| ToggleOption`	undefined

ToggleOption 数据类型

参数	说明	类型	默认值
expanded	是否展开, 传 true 为全部展开，false 为全部收起，不传参为全部切换	boolean	`undefined`
skipDisabled	是否跳过禁用的选项	boolean	`false`

IBestCollapseItem @Props

参数	说明	类型	默认值
groupId	分组id, 与IBestCollapse `groupId` 一致	string	`''`
name	唯一标识符	string	`''`
index	索引	number	`''`
icon	标题栏左侧图标	ResourceStr	`''`
iconColor	标题栏左侧图标颜色	ResourceColor	`#323233`
iconSize	选项图标	string \| number	`16`
title	标题文字	ResourceStr	`''`
titleColor	标题文字颜色	ResourceColor	`#323233`
titleFontSize	标题文字大小	string \| number	`14`
value	标题右侧文字	ResourceStr	`''`
valueColor	标题右侧文字颜色	ResourceColor	`#969799`
valueFontSize	标题右侧文字大小	string \| number	`14`
isShowBorder	是否显示内边框	boolean	`true`
disabled	是否禁用	boolean	`false`
readOnly	是否只读	boolean	`false`

IBestCollapseItem 插槽

插槽名	说明	类型
defaultBuilder	默认内容	CustomBuilder

Collapse 折叠面板 ​

介绍 ​

引入 ​

代码演示 ​

基础用法 ​

手风琴 ​

禁用状态 ​

自定义标题 ​

实例方法 ​

API ​

IBestCollapse @Props ​

IBestCollapse 插槽 ​

IBestCollapse Events ​

IBestCollapseController 实例方法 ​

ToggleOption 数据类型 ​

IBestCollapseItem @Props ​

IBestCollapseItem 插槽 ​

Collapse 折叠面板

介绍

引入

代码演示

基础用法

手风琴

禁用状态

自定义标题

实例方法

API

IBestCollapse @Props

IBestCollapse 插槽

IBestCollapse Events

IBestCollapseController 实例方法

ToggleOption 数据类型

IBestCollapseItem @Props

IBestCollapseItem 插槽