代码演示
如何引入
基本用法
不同类型
支持4种类型:
info
、warning
、danger
、success
。默认为 info
。非全屏模式
可以设置
fullMode={false}
使用非全屏模式的 banner 样式。
通过 bordered
属性可以设置边框。自定义内容
可以通过 children 自定义其他渲染内容。
API参考
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
bordered | 是否展示边框,仅在非全屏模式下有效 | boolean | false | 1.0 |
className | 类名 | string | - | - |
closeIcon | 自定义关闭icon,为 null 时不显示关闭按钮 | string| ReactNode | - | 1.0 |
description | 描述内容 | ReactNode | - | 1.0 |
fullMode | 是否为全屏模式 | boolean | true | 1.0 |
icon | 自定义 icon,为 null 时不显示 icon | string| ReactNode | - | 1.0 |
onClose | 关闭时的回调函数 | function | - | - |
style | 样式名 | object | - | - |
title | 标题 | ReactNode | - | 1.0 |
type | 类型,支持 info , success , danger , warning | string | info | - |
Accessibility
ARIA
- 组件的
role
为 'alert' - 关闭按钮的
aria-label
为 'Close'
键盘和焦点
- Banner 的关闭按钮可以使用
Tab
键聚焦,按钮聚焦后,敲击Enter
键或Space
键可以关闭 banner