Semi D2C 现已支持 Figma DevMode, 安装插件，随时查阅图层对应的前端代码
Banner
通知横幅：横幅通常用于标识全页的状态或通知等，常驻并由用户主动关闭。支持 info / success / danger / warning 四语义，fullMode 全屏与非全屏（可 bordered 边框）两形态；title / description / icon / closeIcon 可自定义，children 渲染于尾部 extra 区。role="alert"，关闭按钮可 Tab + Enter/Space。
如何引入
import { Banner } from '@chenzy-design/svelte';基本用法
横幅常驻，需用户主动关闭；onClose 回调可用于同步外部显隐状态。
不同类型
支持 4 种类型：info / warning / danger / success，默认为 info。
非全屏模式
设置 fullMode={false} 使用非全屏模式；bordered 显示边框，icon / closeIcon 传 null 隐藏图标与关闭按钮。
自定义内容
通过 children 自定义其他渲染内容，渲染于横幅尾部的 extra 区。
自定义图标
通过 icon 自定义横幅图标，通过 closeIcon 自定义关闭图标。
API 参考
Banner
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 类型，决定背景 / 文本 / 图标语义色 | 'info'|'success'|'danger'|'warning' | 'info' |
fullMode | 是否为全屏模式 | boolean | true |
bordered | 是否展示边框，仅在非全屏模式下有效 | boolean | false |
title | 标题文本，被 titleSnippet 覆盖 | string | '' |
description | 描述内容，被 descriptionSnippet 覆盖 | string | '' |
icon | 自定义 icon，为 null 时不显示 icon | Snippet | null | undefined |
closeIcon | 自定义关闭 icon，为 null 时不显示关闭按钮 | Snippet | null | undefined |
children | 自定义渲染内容，渲染于尾部 extra 区 | Snippet | undefined |
titleSnippet | 自定义标题片段，覆盖 title | Snippet | undefined |
descriptionSnippet | 自定义描述片段，覆盖 description | Snippet | undefined |
onClose | 关闭时的回调函数 | (e: MouseEvent) => void | undefined |
class | 类名 | string | '' |
style | 样式 | string | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onClose | — | 关闭按钮触发关闭 |
Slots
| 名称 | 说明 |
|---|---|
children | 自定义渲染内容，渲染于尾部 extra 区 |
titleSnippet | 自定义标题片段，覆盖 title prop |
descriptionSnippet | 自定义描述片段，覆盖 description prop |
icon | 自定义图标；传 null 不显示 |
closeIcon | 自定义关闭图标；传 null 不显示关闭按钮 |
Accessibility
- role="alert"（对齐 Semi）；关闭按钮 aria-label「关闭」可 Tab 聚焦，Enter/Space 关闭；默认语义图标 aria-label 标注类型。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-banner-danger-bg-default | var(--cd-color-danger-light-default) | 背景色 - 危险 |
--cd-color-banner-danger-border-default | var(--cd-color-danger) | 描边颜色 - 危险 |
--cd-color-banner-danger-text-default | var(--cd-color-danger) | 文本颜色 - 危险 |
--cd-color-banner-info-bg-default | var(--cd-color-info-light-default) | 背景色 - info |
--cd-color-banner-info-border-default | var(--cd-color-info) | 描边颜色 - info |
--cd-color-banner-info-text-default | var(--cd-color-info) | 文本颜色 - info |
--cd-color-banner-success-bg-default | var(--cd-color-success-light-default) | 背景色 - 成功 |
--cd-color-banner-success-border-default | var(--cd-color-success) | 描边颜色 - 成功 |
--cd-color-banner-success-text-default | var(--cd-color-success) | 文本颜色 - 成功 |
--cd-color-banner-warning-bg-default | var(--cd-color-warning-light-default) | 背景色 - 警告 |