提示框
了解如何使用 Note、Tip、Warning、Danger、Check 和自定义 Callout 组件，在文档中突出显示文档中的关键信息。
使用提示框突出显示警告、提示或要求等重要上下文，同时不中断阅读流程。
可用的提示框
注释 - 有助于理解的上下文或补充信息。用于增强理解的提示。
信息 - 中立的信息或事实。用于补充细节。
提示 - 最佳实践或优化建议。用于改善使用体验的“专业提示”。
警告 - 重要的注意事项或要求。用于提示忽略某项内容可能导致的问题。
危险 - 关键警告。用于提示可能导致数据丢失或安全问题的操作。
确认 - 成功确认。用于确认行为正确或操作成功完成。
用法
<Note>
This is helpful context for the reader.
</Note>
<Warning>
This could cause issues if you skip this step.
</Warning>
<Danger>
This action cannot be undone. Proceed with caution.
</Danger>添加标题
为任意提示框添加自定义标题：
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>你可以在提示框中使用 Markdown，包括 code 和链接。
添加代码块
提示框可以包含代码：
getData() 函数签名已更改：
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })最佳实践
过多的提示框会削弱其影响力。每页最多使用 1-2 个。
仅将提示框用于读者绝不能错过的信息。
| 场景 | 提示框 |
|---|---|
| 有帮助的提示 | <Tip> |
| 补充上下文 | <Note> 或 <Info> |
| 可能引发问题的情况 | <Warning> |
| 不可逆操作 | <Danger> |
| 确认 | <Check> |
| 自定义品牌样式 | <Callout> |
提示框应便于快速浏览。如果需要多个段落，请考虑改用 Accordion。
推荐： 一到两句话 避免： 多个文本段落
将提示框放在：
- 有要求的代码之前
- 包含重要注意事项的说明之后
- 所引用内容的附近
属性
所有提示框都接受相同的属性：
自定义标题（替换默认标题）。
无障碍访问
提示框使用语义化 HTML 和 ARIA 角色实现：
- 屏幕阅读器会读出提示框类型
- 颜色不是唯一的指示方式（其中包含图标）
- 两种主题下都具有足够的颜色对比度
自定义提示框
使用 Callout 组件和自定义图标、颜色创建提示框：
自定义 - 使用任意图标和颜色来匹配你的内容。
使用我们的 CI/CD 流水线，放心部署你的更改。
使用 regular/、light/ 或 duotone/ 等图标样式前缀来设置不同的字重。
自定义提示框用法
<Callout icon="key" color="#FFC107">
This callout uses a key icon with amber color.
</Callout>
<Callout icon="rocket" color="#9333EA">
This callout uses a rocket icon with purple color.
</Callout>
<Callout icon="regular/star" color="#EC4899">
Use style prefixes for different icon weights.
</Callout>自定义提示框属性
图标名称（参见图标）。
十六进制颜色代码（例如 #FFC107）。默认为强调色。
图标样式前缀： 添加前缀以更改图标字重：
solid/- 填充图标（默认）regular/- 描边图标light/- 细描边图标duotone/- 双双色调图标