Banner 设计文档

通知横幅:横幅通常用于标识全页的状态或通知等,常驻并由用户主动关闭。支持 info / success / danger / warning 四语义,fullMode 全屏与非全屏(可 bordered 边框)两形态;title / description / icon / closeIcon 可自定义,children 渲染于尾部 extra 区。role="alert",关闭按钮可 Tab + Enter/Space。

← API 文档

使用建议

通知横幅:横幅通常用于标识全页的状态或通知等,常驻并由用户主动关闭。支持 info / success / danger / warning 四语义,fullMode 全屏与非全屏(可 bordered 边框)两形态;title / description / icon / closeIcon 可自定义,children 渲染于尾部 extra 区。role="alert",关闭按钮可 Tab + Enter/Space。

Accessibility

  • role="alert"(对齐 Semi);关闭按钮 aria-label「关闭」可 Tab 聚焦,Enter/Space 关闭;默认语义图标 aria-label 标注类型。

设计变量

变量默认值用法
--cd-color-banner-danger-bg-default var(--cd-color-danger-light-default)背景色 - 危险
--cd-color-banner-danger-border-default var(--cd-color-danger)描边颜色 - 危险
--cd-color-banner-danger-text-default var(--cd-color-danger)文本颜色 - 危险
--cd-color-banner-info-bg-default var(--cd-color-info-light-default)背景色 - info
--cd-color-banner-info-border-default var(--cd-color-info)描边颜色 - info
--cd-color-banner-info-text-default var(--cd-color-info)文本颜色 - info
--cd-color-banner-success-bg-default var(--cd-color-success-light-default)背景色 - 成功
--cd-color-banner-success-border-default var(--cd-color-success)描边颜色 - 成功
--cd-color-banner-success-text-default var(--cd-color-success)文本颜色 - 成功
--cd-color-banner-warning-bg-default var(--cd-color-warning-light-default)背景色 - 警告