Banner 横幅
Banner 在页面里显示一条提示:发生了什么、需要知道什么。它用类型对应的颜色,可以带标题、操作按钮和关闭按钮。
演示
类型
type 决定颜色和图标。default 是中性灰。
标题
title 在正文上方加一行标题。也可以只有标题。
可关闭
closable 会加一个 × 按钮。点击后横幅淡出并收起,动画结束后卸载,再调用 onAfterLeave。onClose 返回 false(或者 resolve 为 false 的 Promise)可以阻止关闭。多个可关闭的横幅之间用 margin 而不是 gap 隔开:margin 会跟着横幅一起收起,下面的内容能平滑地移上来。
不显示图标
showIcon={false} 隐藏图标。
自定义图标
icon 替换类型自带的图标。它继承类型的颜色,尺寸以 em 计,所以 1em 大小的 SVG 正好填满图标位置。
操作
action 把按钮放在文字后面。文字需要更多空间时,按钮会换到下一行。小号按钮和一行文字一样高,不会把横幅撑高。
无边框
bordered={false} 只保留背景色,适合放在本身已经有边框的卡片或面板里。
属性
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
type | default | info | success | warning | error | default | 颜色和图标。 | 未发布 |
title | ReactNode | undefined | 正文上方的标题。 | 未发布 |
children | ReactNode | undefined | 提示内容。 | 未发布 |
action | ReactNode | undefined | 文字后面的按钮或链接,空间不够时换到下一行。 | 未发布 |
showIcon | boolean | true | 在文字前显示图标。 | 未发布 |
icon | ReactNode | undefined | 替换类型自带的图标。 | 未发布 |
bordered | boolean | true | 是否显示边框。未设置时取 ConfigProvider 的 bordered。 | 未发布 |
closable | boolean | false | 加一个关闭横幅的 × 按钮。 | 未发布 |
onClose | (event) => boolean | void | Promise<boolean | void> | undefined | 点击 × 时调用。返回 false 或 resolve 为 false 的 Promise 时不关闭。 | 未发布 |
onAfterLeave | () => void | undefined | 关闭动画结束、横幅卸载后调用。 | 未发布 |
Banner 也接受原生 div 的属性和 ref(title 是标题,不是悬停提示)。错误和警告类型带 role="alert",读屏软件会立即播报;其他类型带 role="status",等读屏软件空闲时再读。两者都只播报页面加载之后才出现的横幅。可以传 role 覆盖。