Banner
banner公告条 · 横贯容器顶部全宽 bar(站点维护/促销/版本更新) · 6 语气×soft/solid + 前导图标/操作区/可关闭 + 居中或左对齐 + 长文案 dogfood Marquee 单行无缝滚动 · 区别 Alert(局部卡片)/Notification(命令式四角)
用法
基础用法
通栏公告条，前导图标随 tone 自动着色，默认居中单行。
新版本 2.0 已发布，包含 8 个新组件
tsx
<Banner icon={<Info />}>新版本 2.0 已发布，包含 8 个新组件</Banner>六语气
tone 提供 neutral / info / brand / success / warning / danger。
部署成功，服务已切换到新版本
你的会员将在 3 天后到期
系统将于 23:00 停机维护
tsx
<>
<Banner tone="success" icon={<Rocket />}>部署成功，服务已切换到新版本</Banner>
<Banner tone="warning" icon={<TriangleAlert />}>你的会员将在 3 天后到期</Banner>
<Banner tone="danger" icon={<TriangleAlert />}>系统将于 23:00 停机维护</Banner>
</>实色填充
variant="solid" 用实色底，更醒目，适合促销 / 重大公告。
限时优惠：升级 Pro 立享 8 折
tsx
<Banner variant="solid" tone="brand" icon={<Sparkles />} align="center">
限时优惠：升级 Pro 立享 8 折
</Banner>操作 + 可关闭
action 槽放右侧操作，传 onClose 渲染关闭按钮。
我们更新了隐私政策
tsx
<Banner
tone="neutral"
icon={<Megaphone />}
align="start"
action={<Button size="sm" variant="outline">了解更多</Button>}
onClose={() => setOpen(false)}
>
我们更新了隐私政策
</Banner>滚动跑马灯
scrollable 让长文案单行无缝滚动（hover 暂停）。
欢迎使用瑚琏 UI · 全量国产化设计 token · 暗色模式开箱即用 · 持续更新中
tsx
<Banner variant="solid" tone="info" icon={<Megaphone />} scrollable>
欢迎使用瑚琏 UI · 全量国产化设计 token · 暗色模式开箱即用 · 持续更新中
</Banner>何时用
横贯容器顶部的全宽公告 bar（站点维护、促销、版本更新），全局级、横向铺满。局部区块内的静态提示卡片用 Alert；命令式自动消失的轻提示用 Toast；四角弹出的富通知用 Notification。
导入
ts
import { Banner } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| tone | "neutral"｜"info"｜"brand"｜"success"｜"warning"｜"danger" | "info" | 语气色 |
| variant | "soft"｜"solid" | "soft" | soft=浅底 / solid=实色填充（更醒目，适合促销/重大公告） |
| align | "start"｜"center" | "center" | 内容对齐 |
| scrollable | boolean | false | 文案过长时单行无缝滚动（纯 CSS marquee·hover 暂停） |
| closeLabel | string | — | 关闭按钮无障碍标签 |
| className | string | — | 额外类名 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClose | () => void | 传入则渲染关闭按钮 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon | ReactNode | 前导图标（传入 svg；随 tone 自动着色） |
| children | ReactNode | 文案主体 |
| action | ReactNode | 右侧操作区（如「查看详情」链接/按钮） |
禁忌 / 坑
onClose只触发回调、不自管显隐，显示/隐藏由调用方 state 控制（受控）；不传则不渲染关闭按钮。scrollable走纯 CSS marquee（hover 暂停），仅用于单行长文案；多行内容别开。solid变体下action里的链接用text-current跟随实色底的前景色，别硬编码颜色。
相关
Alert · Toast · Notification · ServiceMessage · Result · GiftFeed
Playground
这是一条全宽公告条
<Banner onClose={() => {}}>公告内容</Banner>