高亮文本 - Semi Design Next

代码演示

如何引入

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

基本用法

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

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

代码

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

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

    return (
        <h2>
            <Highlight sourceString={sourceString} searchWords={searchWords} />
        </h2>
    );
}

指定高亮样式

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

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

代码

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

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

    return (
        <>
            <h2>
                <Highlight
                    sourceString={sourceString}
                    searchWords={searchWords}
                    highlightStyle={{
                        borderRadius: 6,
                        marginLeft: 4,
                        marginRight: 4,
                        paddingLeft: 4,
                        paddingRight: 4,
                        backgroundColor: 'var(--semi-teal-7)',
                        color: 'var(--semi-white)',
                    }}
                />
            </h2>
            <h2>
                <Highlight
                    sourceString={sourceString}
                    searchWords={searchWords}
                    highlightStyle={{
                        borderRadius: 6,
                        marginLeft: 4,
                        marginRight: 4,
                        paddingLeft: 4,
                        paddingRight: 4,
                        backgroundColor: 'var(--semi-color-primary)',
                        color: 'var(--semi-white)',
                    }}
                />
            </h2>
        </>
    );
}

不同文本使用差异化样式

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

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

代码

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

export default function HighlightDemo() {
    return (
        <h2>
            <Highlight
                component="span"
                sourceString="从 Semi Design 到 Any Design  快速定义你的设计系统，并应用在设计稿和代码中"
                searchWords={[
                    {
                        text: 'Semi',
                        style: {
                            backgroundColor: 'var(--semi-teal-7)',
                            color: 'var(--semi-white)',
                            padding: 4,
                        },
                        className: 'keyword1',
                    },
                    {
                        text: '设计系统',
                        style: {
                            backgroundColor: 'var(--semi-color-primary)',
                            color: 'var(--semi-white)',
                            padding: 4,
                        },
                        className: 'keyword2',
                    },
                    {
                        text: '设计稿和代码',
                        style: {
                            backgroundColor: 'var(--semi-violet-5)',
                            color: 'var(--semi-white)',
                            padding: 4,
                        },
                        className: 'keyword3',
                    },
                ]}
                highlightStyle={{ borderRadius: 4 }}
            />
        </h2>
    );
}

指定高亮标签

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

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

代码

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

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

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

API 参考

Highlight

Props

属性	说明	类型	默认值
autoEscape	是否自动转义 `searchWords` 中的正则特殊字符。关闭后 `searchWords` 按正则表达式匹配。	`boolean`	`true`
caseSensitive	是否区分大小写。	`boolean`	`false`
component	渲染高亮文本的标签名，如 `span`。	`string`	`"mark"`
highlightClassName	高亮标签的类名，与对象项的 `className` 一起添加到标签上。	`string`	-
highlightStyle	高亮标签的内联样式，键使用驼峰写法（如 `borderRadius`），长度数值按 React 规则补 `px`。与对象项的 `style` 合并，对象项的同名属性优先。	`React.CSSProperties`	-
searchWords	需要高亮的文本，可以是字符串、字符串数组，或带 `text`、`className`、`style` 的对象数组。未设置时为空数组，不高亮任何文本。	`string \| SearchWords`	-
sourceString	源文本。	`string`	`""`

Highlight 没有根元素，渲染的是若干行内片段：className、style、id 等额外属性无处可落，不会生效，也不能挂 ref。