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) | 背景色 - 警告 |