通告栏 NoticeBar
展示一组消息通知。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
展示一组消息通知。
何时使用
适用于当前页面内信息的通知，是一种较醒目的页面内通知方式。
示例
NoticeBar
属性
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| closeable | 是否可关闭 | boolean | false | |
| closeIcon | 自定义关闭按钮图标 | ReactNode | <CloseOutline /> | |
| color | 通告栏的类型 | 'default' | 'alert' | 'error' | 'info' | 'success' | 'default' | |
| content | 公告内容 | React.ReactNode | - | |
| delay | 开始滚动的延迟，单位 ms | number | 2000 | |
| extra | 额外操作区域，显示在关闭按钮左侧 | React.ReactNode | - | |
| icon | 左侧广播图标 | React.ReactNode | <SoundOutline /> | |
| onClose | 关闭时的回调 | () => void | - | |
| onClick | 点击事件 | () => void | - | |
| speed | 滚动速度，单位 px/s | number | 50 | |
| wrap | 是否多行展示 | boolean | false | |
| shape | 形状 (rectangular: 直角; neutral: 圆角; rounded: 圆形) | 'rectangular' | 'neutral' | 'rounded' | 'rectangular' | 5.38.0 |
| bordered | 边框可见性 (block: 上下边框; true: 全边框; false: 无边框) | 'block' | boolean | 'block' | 5.38.0 |
CSS 变量
| 属性 | 说明 | 默认值 | 全局变量 | 版本 |
|---|---|---|---|---|
--background-color | 背景色 | var(--adm-color-weak) | ||
--border-color | 边框颜色 | var(--adm-color-weak) | ||
--font-size | 文字字号 | 15px | ||
--height | 整体高度 | 40px | ||
--icon-font-size | 左侧图标的字号 | 18px | ||
--text-color | 文字颜色 | #ffffff | ||
--adm-notice-bar-border-radius | 圆角形状(neutral)的圆角大小 | 4px | --adm-notice-bar-border-radius | 5.38.0 |
--adm-notice-bar-border-width | 边框粗细 | 1px | --adm-notice-bar-border-width | 5.38.0 |