IBest-UI@HarmonyOS

Appearance

Highlight 高亮文本 ​

介绍 ​

高亮指定文本内容。

引入 ​

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 ​

参数说明类型默认值
autoEscape是否自动转义booleantrue
caseSensitive是否区分大小写booleanfalse
keywords高亮关键字ResourceStr | ResourceStr[]''
sourceString源文本ResourceStr''
textColor文字颜色ResourceColor#969799
highLightColor高亮文字颜色ResourceColor#1989fa
textFontSize文字大小string | number14
highLightFontSize高亮文字大小string | number14