IBest-UI

Appearance

TextEllipsis 文本省略 ​

介绍 ​

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

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

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

展开/收起 ​

展开/收起

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

自定义操作样式 ​

自定义操作样式

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

API ​

@Props ​

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

Events ​

事件名说明回调参数
onActionClick 2.0.9点击操作文字时触发, isExpand 为点击后状态, true 为展开, false 为折叠isExpand: boolean