反馈类 · Banner
通知横幅
横幅通常用于标识全页的状态或通知等。它通常是常驻的,需要用户主动将其关闭。

代码演示

如何引入

基本用法

不同类型

支持4种类型:infowarningdangersuccess。默认为 info

非全屏模式

可以设置 fullMode={false} 使用非全屏模式的 banner 样式。 通过 bordered 属性可以设置边框。

自定义内容

可以通过 children 自定义其他渲染内容。

API参考

属性说明类型默认值版本
bordered是否展示边框,仅在非全屏模式下有效booleanfalse1.0
className类名string--
closeIcon自定义关闭icon,为 null 时不显示关闭按钮string| ReactNode-1.0
description描述内容ReactNode-1.0
fullMode是否为全屏模式booleantrue1.0
icon自定义 icon,为 null 时不显示 iconstring| ReactNode-1.0
onClose关闭时的回调函数function--
style样式名object--
title标题ReactNode-1.0
type类型,支持 info, success, danger, warningstringinfo-

Accessibility

ARIA

  • 组件的 role 为 'alert'
  • 关闭按钮的 aria-label 为 'Close'

键盘和焦点

  • Banner 的关闭按钮可以使用 Tab 键聚焦,按钮聚焦后,敲击 Enter 键或 Space 键可以关闭 banner

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED