Mark 标记

标记文字，用于标出搜索命中或者需要注意的片段。

搜索「香辛料」共找到 3 条结果，其中《狼と香辛料》第一卷提到香辛料的段落最多。

import { Mark, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg">
      搜索「 <Mark>香辛料</Mark> 」共找到 3 条结果，其中《狼と香辛料》第一卷提到 <Mark>香辛料</Mark>{' '}
      的段落最多。
    </Text>
  )
}

tsx

用法

import { Mark } from '@hina-ui/react'

组件渲染为原生的 mark，带浅色底与很小的圆角，文字颜色不变，因此在段落中不打断阅读。

这一段里被标记的文字带有底色。

import { Mark, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg">
      这一段里 <Mark>被标记的文字</Mark> 带有底色。
    </Text>
  )
}

tsx

示例

标出搜索命中

按关键词切分文本，命中的片段用组件包裹。一段文字中可以出现多处标记。

关键词：航路

狼と香辛料第一卷讲述行商人与自称丰收之神的少女同行的旅途。

import { Fragment } from 'react'
import { Mark, Stack, Text } from '@hina-ui/react'

const keyword = '航路'
const paragraph = '狼と香辛料 第一卷讲述行商人与自称丰收之神的少女同行的旅途。'
const parts = paragraph.split(keyword)

export default function Demo() {
  return (
    <Stack className="max-w-lg">
      <Text size="sm" tone="muted">
        关键词：{keyword}
      </Text>
      <Text>
        {parts.map((part, index) => (
          <Fragment key={index}>
            {part} {index < parts.length - 1 && <Mark>{keyword}</Mark>}
          </Fragment>
        ))}
      </Text>
    </Stack>
  )
}

tsx

正文中的标记

Prose 会为其中的原生 mark 标签应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。

正文中的 mark 标签不需要单独引入组件。

import { Prose } from '@hina-ui/react'

export default function Demo() {
  return (
    <Prose className="max-w-lg">
      <p>
        正文中的 <mark>mark</mark> 标签不需要单独引入组件。
      </p>
    </Prose>
  )
}

tsx

API

Props

属性	类型	默认值	说明
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	被标记的文字

用法

示例

标出搜索命中

正文中的标记

无障碍

API

Props

内容属性