IBest-UI

Appearance

Highlight 高亮文本 ​

介绍 ​

高亮指定文本内容。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestHighlight({
        keywords: '难题',
        sourceString: '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。'
      })
    }
  }
}

多字符匹配 ​

多字符匹配

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestHighlight({
        keywords: ['轻量', '深色模式', '鸿蒙'],
        sourceString: $r("app.string.app_desc")  // 换成项目本地资源
      })
    }
  }
}

设置高亮样式 ​

设置高亮样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestHighlight({
        keywords: ['难题', '终有一天', '答案'],
        sourceString: '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。',
        highLightColor: Color.Red,
        highLightFontSize: 30
      })
    }
  }
}

设置默认样式 ​

设置默认样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestHighlight({
        keywords: ['难题', '终有一天', '答案'],
        sourceString: '慢慢来，不要急，生活给你出了难题，可也终有一天会给出答案。',
        textColor: Color.Red,
        textFontSize: 16
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
sourceString源文本ResourceStr''
keywords高亮关键字ResourceStr | ResourceStr[] | IBestHighlightKeywords[]''
autoEscape是否自动转义booleantrue
caseSensitive是否区分大小写booleanfalse
textColor文字颜色ResourceColor#969799
highLightColor高亮文字颜色ResourceColor#1989fa
textFontSize文字大小string | number14
highLightFontSize高亮文字大小string | number14
maxLines最大行数number-
overflow超出隐藏TextOverflowNone
lineHeight 2.2.0行高string | number | Resource''

IBestHighlightKeywords 数据结构 ​

参数说明类型
text关键字ResourceStr
color关键字颜色ResourceColor
fontSize关键字大小string | number

Events ​

事件名说明事件类型
onKeywordClick高亮词点击事件(text: string) => void