组件
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' | 提示框类型 |
旧类型名 warn、error、success、idea 作为别名保留,向后兼容:
warn→warningerror→dangersuccess→checkidea→tip
CalloutTitle
CalloutTitle 无额外属性,作为 Callout 的子组件使用,用于显示提示框标题。
CalloutDescription
CalloutDescription 无额外属性,作为 Callout 的子组件使用,用于显示提示框正文内容。
注意事项
CalloutTitle和CalloutDescription是可选的子组件- 不使用子组件时,
Callout的直接内容会作为正文显示 Callout组件是fumadocs-ui/mdx默认组件之一,无需额外 import