跳到正文

Banner 横幅

Banner 在页面里显示一条提示:发生了什么、需要知道什么。它用类型对应的颜色,可以带标题、操作按钮和关闭按钮。

演示

类型

type 决定颜色和图标。default 是中性灰。

标题

title 在正文上方加一行标题。也可以只有标题。

可关闭

closable 会加一个 × 按钮。点击后横幅淡出并收起,动画结束后卸载,再调用 onAfterLeave。onClose 返回 false(或者 resolve 为 false 的 Promise)可以阻止关闭。多个可关闭的横幅之间用 margin 而不是 gap 隔开:margin 会跟着横幅一起收起,下面的内容能平滑地移上来。

不显示图标

showIcon={false} 隐藏图标。

自定义图标

icon 替换类型自带的图标。它继承类型的颜色,尺寸以 em 计,所以 1em 大小的 SVG 正好填满图标位置。

操作

action 把按钮放在文字后面。文字需要更多空间时,按钮会换到下一行。小号按钮和一行文字一样高,不会把横幅撑高。

无边框

bordered={false} 只保留背景色,适合放在本身已经有边框的卡片或面板里。

属性

名称类型默认值说明版本
typedefault | info | success | warning | errordefault颜色和图标。未发布
titleReactNodeundefined正文上方的标题。未发布
childrenReactNodeundefined提示内容。未发布
actionReactNodeundefined文字后面的按钮或链接,空间不够时换到下一行。未发布
showIconbooleantrue在文字前显示图标。未发布
iconReactNodeundefined替换类型自带的图标。未发布
borderedbooleantrue是否显示边框。未设置时取 ConfigProvider 的 bordered。未发布
closablebooleanfalse加一个关闭横幅的 × 按钮。未发布
onClose(event) => boolean | void | Promise<boolean | void>undefined点击 × 时调用。返回 false 或 resolve 为 false 的 Promise 时不关闭。未发布
onAfterLeave() => voidundefined关闭动画结束、横幅卸载后调用。未发布

Banner 也接受原生 div 的属性和 ref(title 是标题,不是悬停提示)。错误和警告类型带 role="alert",读屏软件会立即播报;其他类型带 role="status",等读屏软件空闲时再读。两者都只播报页面加载之后才出现的横幅。可以传 role 覆盖。