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

Banner 全宽提示

顶部全宽通告条 —— 6 种 tone × 2 种 variant，可关闭、可吸顶。

基础用法

最简形态 — 一段公告文案。Banner 默认 variant="subtle"：浅色底 + 强调色文字，最克制的全宽提示。

<CfBanner tone="info">
系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
</CfBanner>

<CfBanner tone="info">
系统将于今晚 22:00 - 22:30 进行维护，部分功能可能不可用。
</CfBanner>

6 种 tone

tone —— info（中性公告）/ success（已完成）/ warning（需注意）/ danger（紧急）/ accent（营销）/ neutral（最克制）。

<CfBanner tone="info">info</CfBanner>
<CfBanner tone="success">success</CfBanner>
<CfBanner tone="warning">warning</CfBanner>
<CfBanner tone="danger">danger</CfBanner>
<CfBanner tone="accent">accent</CfBanner>
<CfBanner tone="neutral">neutral</CfBanner>

<CfBanner tone="info">info</CfBanner>
<CfBanner tone="success">success</CfBanner>
<CfBanner tone="warning">warning</CfBanner>
<CfBanner tone="danger">danger</CfBanner>
<CfBanner tone="accent">accent</CfBanner>
<CfBanner tone="neutral">neutral</CfBanner>

实色 variant

variant="solid" 用 tone 的实色填底、白字，视觉权重最强，适合营销公告或紧急中断。

<CfBanner variant="solid" tone="accent" dismissible>
新版本 v2.0 上线 — 全新主题与三套密度
<template #action>
  <CfButton size="sm" variant="ghost">查看更新</CfButton>
</template>
</CfBanner>

<CfBanner
variant="solid"
tone="accent"
dismissible
action={<CfButton size="sm" variant="ghost">查看更新</CfButton>}
>
新版本 v2.0 上线 — 全新主题与三套密度
</CfBanner>

关闭按钮 + 操作槽

dismissible 在右侧加 × 关闭按钮 — 点击后整个 banner 移除并触发 dismiss / onDismiss。action 槽 / prop 在文案与 × 之间放一个操作按钮（清理 / 查看 / 续费）。

<CfBanner tone="warning" dismissible>
存储空间已使用 86%，请尽快清理或升级配额。
<template #action>
  <CfButton size="sm" variant="tertiary">清理</CfButton>
</template>
</CfBanner>

<CfBanner
tone="warning"
dismissible
action={<CfButton size="sm" variant="tertiary">清理</CfButton>}
>
存储空间已使用 86%，请尽快清理或升级配额。
</CfBanner>

API

属性	类型	默认值	说明
`tone`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'accent' \| 'neutral'`	`'info'`	语义色
`variant`	`'subtle' \| 'solid'`	`'subtle'`	视觉模式
`dismissible`	`boolean`	`false`	显示关闭 ×
`icon`	`boolean`	`true`	是否显示左侧图标（Vue 端默认 true，可用 `#icon` slot 替换；React 端用 `icon` prop 传节点）
`sticky`	`boolean`	`false`	是否吸顶（`position: sticky`）

事件：dismiss（React 端：onDismiss）。Slot：默认内容、action、icon（Vue）。