IBest-UI@HarmonyOS

Appearance

TextEllipsis 文本省略 ​

介绍 ​

对长文本进行省略，支持展开/收起。

引入 ​

ts
import { IBestTextEllipsis } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State text: string = '人一生的大部分时间都是平淡无奇的。这也是我们身体养精蓄锐的必要条件。因为只有身心在泛起涟漪的生活中得到充分的修正，才能圆满的迎接人生的下一次高峰。'
  build() {
    IBestTextEllipsis({
      text: this.text
    })
  }
}

展开/收起 ​

展开/收起

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State text: string = '人一生的大部分时间都是平淡无奇的。这也是我们身体养精蓄锐的必要条件。因为只有身心在泛起涟漪的生活中得到充分的修正，才能圆满的迎接人生的下一次高峰。'
  build() {
    IBestTextEllipsis({
      text: this.text,
      showAction: true
    })
  }
}

自定义展示行数 ​

自定义展示行数

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State text: string = "那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。"
  build() {
    Column({space: 16}){
      IBestTextEllipsis({
        text: this.text,
        showAction: true,
        rows: 3
      })
      Row(){
        IBestTextEllipsis({
          text: this.text,
          showAction: true,
          rows: 3
        })
      }.width(200)
    }
  }
}

自定义省略位置 ​

自定义省略位置

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State text: string = "那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。"
  build() {
    Column({space: 16}){
      IBestTextEllipsis({
        text: this.text,
        showAction: true,
        omitPosition: 'start'
      })
      IBestTextEllipsis({
        text: this.text,
        showAction: true,
        omitPosition: 'middle',
        rows: 2
      })
    }
  }
}

自定义省略内容 ​

自定义省略内容

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State text: string = '人一生的大部分时间都是平淡无奇的。这也是我们身体养精蓄锐的必要条件。因为只有身心在泛起涟漪的生活中得到充分的修正，才能圆满的迎接人生的下一次高峰。'
  build() {
    IBestTextEllipsis({
      text: this.text,
      omitContent: "•••"
    })
  }
}

自定义操作样式 ​

自定义操作样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @State text: string = '人一生的大部分时间都是平淡无奇的。这也是我们身体养精蓄锐的必要条件。因为只有身心在泛起涟漪的生活中得到充分的修正，才能圆满的迎接人生的下一次高峰。'
  build() {
    IBestTextEllipsis({
      text: this.text,
      showAction: true,
      expandText: "平铺",
      collapseText: "折叠",
      actionColor: "#DB3131"
    })
  }
}

API ​

@Props ​

参数说明类型默认值
text显示文本string0
textColor文本颜色ResourceColor#323233
textFontSize左侧图标颜色string | number16
lineHeight行高string | number20
rows展示的行数number1
showAction是否显示操作booleanfalse
expandText展开操作文案string展开
collapseText收起操作文案string收起
omitContent省略号内容string…
actionColor操作文字颜色ResourceColor#3D8AF2
omitPosition省略位置，可选值 start middle endstringend