组件 · 反馈 · 原生 HTML 与 React
横幅 Banner
页面或面板顶部的一条提醒：额度、更新、错误。
演示
今天还能写入 1 篇
明天 0 点恢复。
<div class="xxd-banner" data-tone="warning" style="max-width:520px"><i data-xxd-icon="TriangleAlert"></i><div><p class="xxd-banner__title">今天还能写入 1 篇</p><p class="xxd-banner__text">明天 0 点恢复；会员不限。</p></div><div class="xxd-banner__actions"><button class="xxd-btn" data-size="sm">开通会员</button></div><button class="xxd-btn xxd-banner__close" data-variant="ghost" data-icon-only data-size="xs" data-banner-close aria-label="关闭"><i data-xxd-icon="X" data-size="14"></i></button></div>export function BannerDemo() {
return <Banner variant="alert" title="今天还能写入 1 篇" description="明天 0 点恢复。" />;
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-tone | warning | danger | success |
| data-size | sm |
| [data-banner-close] | 关闭按钮（淡出后移除，派发 xxd:banner-close） |
| 类名 | xxd-banner xxd-banner__title xxd-banner__text xxd-banner__actions xxd-banner__close |
键盘与读屏
- 重要提醒用 role=status（错误用 role=alert），图标 aria-hidden
- 关闭按钮有 aria-label；关闭时焦点交给后面最近的可聚焦元素，不会掉到 body 上