高亮文本 - Semi Design Next

代码演示

如何引入

import { Highlight } from '@fibrous/semi-ui-solid';

基本用法

你可以通过 searchWords 指定需要高亮的关键字，通过 sourceString 指定源文本

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

import { Highlight } from '@fibrous/semi-ui-solid';

const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
const searchWords = ['设计系统', 'Semi Design'];

export default function HighlightDemo() {
    return (
        <h2>
            <Highlight sourceString={sourceString} searchWords={searchWords} />
        </h2>
    );
}

指定高亮样式

默认情况下，高亮文本会自带文本样式，背景颜色 --semi-yellow-4, 文本颜色为黑色
暗色模式下，背景颜色为 --semi-yellow-2，文本颜色为白色
当你需要自定义不同的高亮样式时，你可以通过 highlightClassName, highlightStyle来指定

数值不会补 px，highlightStyle 与高亮词的 style 中的长度要写成 '4px' 这样的字符串；'font-weight': 600 等无单位属性不受影响。样式的键要写成 CSS 属性名，backgroundColor 这样的驼峰写法不会生效。

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

import { Highlight } from '@fibrous/semi-ui-solid';

const sourceString = '从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中';
const searchWords = ['设计系统', 'Semi Design'];

const tealStyle = {
    'border-radius': '6px',
    'margin-left': '4px',
    'margin-right': '4px',
    'padding-left': '4px',
    'padding-right': '4px',
    'background-color': 'var(--semi-teal-7)',
    color: 'var(--semi-white)',
};

const primaryStyle = {
    'border-radius': '6px',
    'margin-left': '4px',
    'margin-right': '4px',
    'padding-left': '4px',
    'padding-right': '4px',
    'background-color': 'var(--semi-color-primary)',
    color: 'var(--semi-white)',
};

export default function HighlightDemo() {
    return (
        <>
            <h2>
                <Highlight sourceString={sourceString} searchWords={searchWords} highlightStyle={tealStyle} />
            </h2>
            <h2>
                <Highlight sourceString={sourceString} searchWords={searchWords} highlightStyle={primaryStyle} />
            </h2>
        </>
    );
}

不同文本使用差异化样式

支持针对不同的高亮文本使用不同的高亮样式 searchWords 默认为字符串数组。当传入对象数组时，可以通过 text指定高亮文本，同时单独指定 className、style

对象项的类名字段写作 class，与 JSX 中的 class 属性一致。

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

import { Highlight } from '@fibrous/semi-ui-solid';

const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';

const searchWords = [
    {
        text: 'Semi',
        style: { 'background-color': 'var(--semi-teal-7)', color: 'var(--semi-white)', padding: '4px' },
        class: 'keyword1',
    },
    {
        text: '设计系统',
        style: { 'background-color': 'var(--semi-color-primary)', color: 'var(--semi-white)', padding: '4px' },
        class: 'keyword2',
    },
    {
        text: '设计稿和代码',
        style: { 'background-color': 'var(--semi-violet-5)', color: 'var(--semi-white)', padding: '4px' },
        class: 'keyword3',
    },
];

const highlightStyle = { 'border-radius': '4px' };

export default function HighlightDemo() {
    return (
        <h2>
            <Highlight component="span" sourceString={sourceString} searchWords={searchWords} highlightStyle={highlightStyle} />
        </h2>
    );
}

指定高亮标签

Semi 默认会将 sourceString 中与 searchWords 匹配的文本用 mark 标签包裹，你也可以通过 component 重新指定标签

从 Semi Design 到 Any Design 快速定义你的设计系统，并应用在设计稿和代码中

代码

import { Highlight } from '@fibrous/semi-ui-solid';

const sourceString = '从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中';
const searchWords = ['设计系统', 'Semi Design'];

export default function HighlightDemo() {
    return (
        <h2>
            <Highlight sourceString={sourceString} searchWords={searchWords} component="strong" />
        </h2>
    );
}

API 参考

Highlight

Props

属性	说明	类型	默认值
autoEscape	是否自动转义 searchWords 中的正则特殊字符。	`boolean`	`true`
caseSensitive	是否区分大小写。	`boolean`	`false`
component	高亮标签名。	`string`	`"mark"`
highlightClassName	高亮标签的类名。	`string`	-
highlightStyle	高亮标签的内联样式，键使用 CSS 属性名（如 `'border-radius'`）；数值不会补 px，长度要写成字符串。	`JSX.CSSProperties`	-
searchWords	需要高亮的文本：字符串、字符串数组，或带 text、class、style 的对象数组。	`string \| SearchWords`	-
sourceString	源文本。	`string`	`""`

Highlight 没有根元素，渲染的是若干行内片段，class、style、ref 和 id 等原生属性无处可落，会被丢弃。