开发预览更新于 2026-05-10

Alert 警示

inline 静态消息条 —— 4 种 tone × 3 种 variant，可带标题、图标、关闭按钮。

基础用法

最简形态 —— 一段说明文字加上 status 图标和可选的标题。

一条信息

这是一段补充说明，用于解释当前状态。

<CfAlert tone="info" title="一条信息">这是一段补充说明。</CfAlert>

<CfAlert tone="info" title="一条信息">这是一段补充说明。</CfAlert>

4 种 tone

tone 决定语义颜色 —— info / success / warning / error，对应 token 里 --status-*。每种 tone 自带匹配的 status 图标。

一条信息

蓝色，中性提示。

保存成功

绿色，正向反馈。

磁盘空间不足

黄色，需要注意但非阻塞。

无法连接到服务

红色，严重错误。

<CfAlert tone="info" title="一条信息">蓝色</CfAlert>
<CfAlert tone="success" title="保存成功">绿色</CfAlert>
<CfAlert tone="warning" title="磁盘空间不足">黄色</CfAlert>
<CfAlert tone="error" title="无法连接到服务">红色</CfAlert>

<CfAlert tone="info" title="一条信息">蓝色</CfAlert>
<CfAlert tone="success" title="保存成功">绿色</CfAlert>
<CfAlert tone="warning" title="磁盘空间不足">黄色</CfAlert>
<CfAlert tone="error" title="无法连接到服务">红色</CfAlert>

3 种 variant

variant 改变背景与边框：soft（浅色背景，默认，最常用）/ outline（透明背景 + 边框，最克制）/ solid（满色背景，最强势）。

soft —— 浅色背景，默认样式。

outline —— 透明背景 + 同色边框。

solid —— 满色背景，文字反白。

<CfAlert tone="success" variant="soft">soft —— 浅色背景</CfAlert>
<CfAlert tone="success" variant="outline">outline —— 透明 + 同色边框</CfAlert>
<CfAlert tone="success" variant="solid">solid —— 满色背景</CfAlert>

<CfAlert tone="success" variant="soft">soft</CfAlert>
<CfAlert tone="success" variant="outline">outline</CfAlert>
<CfAlert tone="success" variant="solid">solid</CfAlert>

关闭按钮

closable 在右侧加一个 × 按钮 — 点击后整个 alert 从 DOM 中移除，并触发 close / onClose 事件。

可关闭

右侧出现 × 按钮，点击后整个 alert 从 DOM 中移除。

仅正文 + 关闭按钮，没有 title。

<CfAlert tone="warning" title="可关闭" closable>
右侧出现 × 按钮。
</CfAlert>
<CfAlert tone="info" closable>无 title 的关闭式 alert。</CfAlert>

<CfAlert tone="warning" title="可关闭" closable>
右侧出现 × 按钮。
</CfAlert>
<CfAlert tone="info" closable>无 title 的关闭式 alert。</CfAlert>

隐藏图标

icon={false} 省去左侧 status 图标 —— 用在密集文本流或表单内联提示中更紧凑。

无图标版本

省去左侧 status 图标，更紧凑。

仅一行文字，最克制的提示形式。

<CfAlert tone="info" :icon="false" title="无图标版本">更紧凑</CfAlert>
<CfAlert tone="success" :icon="false">仅一行文字</CfAlert>

<CfAlert tone="info" icon={false} title="无图标版本">更紧凑</CfAlert>
<CfAlert tone="success" icon={false}>仅一行文字</CfAlert>

API

Prop	类型	默认值	说明
`tone`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	语义颜色
`variant`	`'soft' \| 'outline' \| 'solid'`	`'soft'`	视觉变体
`title`	`string`	—	加粗的强调标题
`icon`	`boolean`	`true`	是否显示左侧 status 图标
`closable`	`boolean`	`false`	是否显示右侧 × 按钮

事件：

Vue：@close —— 用户点击关闭按钮时触发
React：onClose —— 同上