Mark
基础排版基于 Bootstrap 5 的高亮组件,用于标记或突出文本内容,如搜索结果、关键信息等,支持与加粗、斜体等样式自由组合
Component Demo
Basic usage and examples of the Mark component
基础用法
高亮显示的文本 可以突出段落中的重点内容。
搜索结果标记
搜索结果中共找到 3 处与关键词相关的匹配,请查看 第 2 页 的详细说明。
组合样式
高亮可以与 加粗 或 斜体 组合使用,也可以自定义类名调整样式。
API Documentation
Complete API reference for the Mark component
Props
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
as | ElementType | 'mark' | 渲染的根元素类型,可传入 `span` 等以复用高亮样式 |
children | ReactNode | - | 高亮内容 |
className | string | - | 自定义类名 |
...rest | HTMLAttributes | - | 根元素的所有原生属性(如 `title`、`style` 等) |
Type Definitions
MarkProps
高亮组件属性接口
export interface MarkProps extends HTMLAttributes<HTMLElement> {
as?: ElementType;
children?: ReactNode;
className?: string;
}