Callout 标注

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

阅读器支持双页

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

<script setup lang="ts">
  import { Callout } from '@hina-ui/vue'
</script>

<template>
  <Callout tone="accent" title="阅读器支持双页" class="max-w-md">
    横屏时会自动切换为双页排版，也可以在阅读设置里固定为单页。
  </Callout>
</template>

vue

用法

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

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

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

<script setup lang="ts">
  import { Callout } from '@hina-ui/vue'
</script>

<template>
  <Callout class="max-w-md">条目的封面来自出版社官网，替换封面需要编辑权限。</Callout>
</template>

vue

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

示例

色调

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

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

不含倾向的补充说明

值得一试的小技巧

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

推荐这样做

这样做之前需要留意

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

<script setup lang="ts">
  import { Callout, Stack } from '@hina-ui/vue'

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

<template>
  <Stack class="w-full max-w-md">
    <Callout v-for="item in tones" :key="item.tone" :tone="item.tone">{{ item.text }}</Callout>
  </Stack>
</template>

vue

标题

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

章节顺序以出版顺序为准

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

<script setup lang="ts">
  import { Callout } from '@hina-ui/vue'
</script>

<template>
  <Callout tone="warning" title="章节顺序以出版顺序为准" class="max-w-md">
    部分作品的连载顺序与单行本收录顺序不同，站内按单行本排列。
  </Callout>
</template>

vue

图标

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

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

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

<script setup lang="ts">
  import { BookOpen } from '@lucide/vue'
  import { Callout, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-md">
    <Callout :icon="false">隐藏图标后，正文占满标注的整个宽度。</Callout>
    <Callout tone="info">
      <template #icon>
        <BookOpen class="text-info-text mt-0.5 size-5 shrink-0" />
      </template>
      替换为与内容相关的图标。
    </Callout>
  </Stack>
</template>

vue

API

Props

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

Slots

插槽	说明
`default`	正文
`icon`	替换图标

用法

示例

色调

标题

图标

无障碍

API

Props

Slots