代码演示 ​

如何引入 ​

jsx
import { Banner } from '@kousum/semi-ui-vue';

基本用法 ​

不同类型 ​

支持4种类型：info、warning、danger、success。默认为 info。

非全屏模式 ​

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

.components-banner-demo {
    .semi-banner-info.semi-banner-bordered {
        border: 1px solid var(--semi-color-primary-disabled);
    }
    .semi-banner-warning.semi-banner-bordered {
        border: 1px solid var(--semi-color-warning-light-active);
    }
    .semi-banner-danger.semi-banner-bordered {
        border: 1px solid var(--semi-color-danger-light-active);
    }
    .semi-banner-success.semi-banner-bordered {
        border: 1px solid var(--semi-color-success-light-active);
    }
}

自定义内容 ​

可以通过 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 句话
      • 对标题进行详尽地描述或者解释，而不是对标题的重复说明
      • 使用正确的标点符号，句子内使用逗号，句子间使用句号

设计变量 ​