反馈类 · 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

文案规范

  • 全屏 Banner
    • 尽量保持内容一行展示完全
    • 使用正确的标点符号,句子内使用逗号,句子间使用句号
  • 非全屏 Banner
    • 标题
      • 使用精简的语言进行说明
      • 标题上尽量避免使用逗号,句号等标点符号,有且只有是疑问句的时候,支持使用问号结尾
    • 正文
      • 在信息传递完整的前提下,尽可能地将正文压缩至 1 -2 句话
      • 对标题进行详尽地描述或者解释,而不是对标题的重复说明
      • 使用正确的标点符号,句子内使用逗号,句子间使用句号

设计变量