IBest-UI-V2

Appearance

Read 查看更多 ​

介绍 ​

用于内容超出指定高度时，显示"展开/收起"按钮。

引入 ​

ts
import { IBestReadMore } from "@ibestservices/ibest-ui-v2"

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local isExpand: boolean = false
  build() {
    Column() {
      IBestReadMore({
        value: this.isExpand!!
      }){
        Text("莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。")
        .fontSize(14)
        .lineHeight(24)
      }
    }
  }
}

自定义高度 ​

自定义高度

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local isExpand: boolean = false
  build() {
    Column() {
      IBestReadMore({
        value: this.isExpand!!,
        collapseHeight: 150
      }){
        Column({space: 12}){
          Text("莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。")
            .fontSize(14)
            .lineHeight(24)
          Image("https://pic.rmb.bdstatic.com/bjh/3f1f471fd58/240608/84792afec007f0da44ea981f73196434.jpeg")
            .height(200)
        }
      }
    }
  }
}

一次性展开 ​

一次性展开

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local isExpand: boolean = false
  build() {
    Column() {
      IBestReadMore({
        value: this.isExpand!!,
        once: true
      }){
        Image("https://pic.rmb.bdstatic.com/bjh/3f1f471fd58/240608/84792afec007f0da44ea981f73196434.jpeg")
          .height(200)
      }
    }
  }
}

异步展开 ​

异步展开

点我查看代码
ts
@Entry
@ComponentV2
struct DemoPage {
  @Local isExpand: boolean = false
  @Local isVip: boolean = false
  build() {
    Column() {
      IBestReadMore({
        value: this.isExpand!!,
        inactive: !this.isVip,
        expandText: this.isVip ? "展开" : "付费解锁",
        expandIcon: this.isVip ? "arrow-down" : "lock",
        beforeExpand: () => {
          if(this.isVip){
            return true
          }
          return new Promise((resolve, reject) => {
            IBestDialogUtil.open({
              title: "提示",
              message: "需开通VIP才能解锁全部内容，是否继续？",
              showCancelButton: true,
              onConfirm: () => {
                this.isVip = true
                resolve(true)
              },
              onCancel: () => {
                reject(false)
              }
            })
          })
        }
      }){
        Text("莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。")
          .fontSize(14)
          .lineHeight(24)
      }
    }
  }
}

API ​

@Props ​

参数说明类型默认值
value展开状态, 支持双向绑定booleanfalse
expandText展开文字ResourceStr展开
collapseText收起文字ResourceStr收起
expandIcon展开图标ResourceStrarrow-down
collapseIcon收起图标ResourceStrarrow-up
actionColor操作文字颜色ResourceColor#1989fa
actionFontSize操作文字大小string | number14
collapseHeight收起高度string | number50
duration展开动画时长, 单位msnumber300
inactive是否置灰booleanfalse
once是否一次性展开, 即展开后不再显示收起booleanfalse
beforeExpand展开前的回调() => boolean | Promise<boolean>-

Events ​

事件名说明事件类型
toggle切换回调(value: boolean) => void

插槽 ​

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