Callout 标注

写入内容之中的一段标注。

阅读器支持双页

横屏时会自动切换为双页排版，也可以在阅读设置里固定为单页。

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

export default function Demo() {
  return (
    <Callout tone="accent" title="阅读器支持双页" className="max-w-md">
      横屏时会自动切换为双页排版，也可以在阅读设置里固定为单页。
    </Callout>
  )
}

tsx

用法

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

标注是写入内容之中的一段文字，用于补充说明、提示技巧或标示需要留意之处。它随内容一同存在，不会自行出现或消失。

条目的封面来自出版社官网，替换封面需要编辑权限。

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

export default function Demo() {
  return <Callout className="max-w-md">条目的封面来自出版社官网，替换封面需要编辑权限。</Callout>
}

tsx

三者的分工：固定写在文档或说明中的提示使用 Callout；操作之后才出现的消息使用 Alert；短暂浮出、数秒后自动消失的反馈使用 Toast。

示例

色调

共六种色调，默认为 neutral，图标随色调变化。

accent 用于给出建议或技巧，其余五种的含义与站内其他组件一致：info 补充背景信息，success 表示推荐的做法，warning 提示需要留意，danger 标示不可恢复的后果。

不含倾向的补充说明

值得一试的小技巧

与当前内容相关的背景信息

推荐这样做

这样做之前需要留意

这样做会造成不可恢复的后果

import { Callout, Stack } from '@hina-ui/react'

const tones = [
  { tone: 'neutral', text: '不含倾向的补充说明' },
  { tone: 'accent', text: '值得一试的小技巧' },
  { tone: 'info', text: '与当前内容相关的背景信息' },
  { tone: 'success', text: '推荐这样做' },
  { tone: 'warning', text: '这样做之前需要留意' },
  { tone: 'danger', text: '这样做会造成不可恢复的后果' },
] as const

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      {tones.map(item => (
        <Callout key={item.tone} tone={item.tone}>
          {item.text}
        </Callout>
      ))}
    </Stack>
  )
}

tsx

标题

title 显示在正文之前，以一句短语概括整段。正文较长时应当加上标题，读者可据此判断该段内容是否与自己相关。

章节顺序以出版顺序为准

部分作品的连载顺序与单行本收录顺序不同，站内按单行本排列。

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

export default function Demo() {
  return (
    <Callout tone="warning" title="章节顺序以出版顺序为准" className="max-w-md">
      部分作品的连载顺序与单行本收录顺序不同，站内按单行本排列。
    </Callout>
  )
}

tsx

图标

将 icon 设为 false 可隐藏图标。需要替换为其他图标时使用 icon 属性，并保持 size-5 与 mt-0.5 的尺寸与位置，以便与正文首行对齐。

隐藏图标后，正文占满标注的整个宽度。

替换为与内容相关的图标。

import { BookOpen } from 'lucide-react'
import { Callout, Stack } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-md">
      <Callout icon={false}>隐藏图标后，正文占满标注的整个宽度。</Callout>
      <Callout tone="info" icon={<BookOpen className="text-info-text mt-0.5 size-5 shrink-0" />}>
        替换为与内容相关的图标。
      </Callout>
    </Stack>
  )
}

tsx

API

Props

属性	类型	默认值	说明
`tone`	`'neutral' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	色调
`title`	`string`	—	标题
`icon`	`boolean`	`true`	是否显示图标
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	正文
`icon`	替换图标

用法

示例

色调

标题

图标

无障碍

API

Props

内容属性