Skip to content

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