OpenManual
组件

Callout 提示框

使用 Callout 组件在文档中添加醒目的提示、警告和备注信息。

Callout 组件用于在文档中显示醒目的提示信息,帮助读者注意到重要的备注、警告或提示内容。

基本用法

使用 Callout 组件创建一个提示框:

<Callout>
  这是一条普通提示信息。
</Callout>

这是一条普通提示信息。

类型变体

通过 type 属性设置不同类型的提示框:

<Callout type="note">备注说明</Callout>
<Callout type="info">信息补充</Callout>
<Callout type="warning">警告提示</Callout>
<Callout type="tip">技巧提示</Callout>
<Callout type="check">确认提示</Callout>
<Callout type="danger">危险提示</Callout>
<Callout type="key">关键信息</Callout>

这是一条备注说明,用于一般性备注。

这是一条信息补充,用于提供额外信息。

这是一条警告提示,请注意相关事项。

这是一条技巧提示,提供实用建议。

这是一条确认提示,表示操作成功或确认。

这是一条危险提示,表示需要注意的危险情况。

这是一条关键信息,用于标注重要要点。

带标题

使用 CalloutTitle 添加标题,CalloutDescription 添加描述内容:

<Callout type="warning">
  <CalloutTitle>注意事项</CalloutTitle>
  <CalloutDescription>
    请确保在执行此操作前已备份数据。
  </CalloutDescription>
</Callout>

注意事项

请确保在执行此操作前已备份数据。

属性

Callout

属性类型默认值说明
type'note' | 'info' | 'warning' | 'tip' | 'check' | 'danger' | 'key''info'提示框类型

旧类型名 warnerrorsuccessidea 作为别名保留,向后兼容:

  • warnwarning
  • errordanger
  • successcheck
  • ideatip

CalloutTitle

CalloutTitle 无额外属性,作为 Callout 的子组件使用,用于显示提示框标题。

CalloutDescription

CalloutDescription 无额外属性,作为 Callout 的子组件使用,用于显示提示框正文内容。

注意事项

  • CalloutTitleCalloutDescription 是可选的子组件
  • 不使用子组件时,Callout 的直接内容会作为正文显示
  • Callout 组件是 fumadocs-ui/mdx 默认组件之一,无需额外 import

On this page