# NoticeBar

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/notice-bar
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Displays a set of message notifications.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Displays a set of message notifications.

## When to Use

It is applicable to the notification of information in the current page, which is a more conspicuous in-page notification method.

## Demos

## NoticeBar

### Props

| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| closeable | Whether it can be closed | `boolean` | `false` |
| closeIcon | Custom close button icon | `ReactNode` | `<CloseOutline />` |
| color | The type of the NoticeBar | `'default' \| 'alert' \| 'error' \| 'info' \| 'success'` | `'default'` |
| content | The content of the NoticeBar | `React.ReactNode` | - |
| delay | Delay to start scrolling, unit `ms` | `number` | `2000` |
| extra | Additional operating area, displayed to the left of the close button | `React.ReactNode` | - |
| icon | Radio icon on the left | `React.ReactNode` | `<SoundOutline />` |
| onClose | Callback when closed | `() => void` | - |
| onClick | Click event | `() => void` | - |
| speed | Scroll speed, unit `px/s` | `number` | `50` |
| wrap | Whether to display multiple lines | `boolean` | `false` |
| shape | Shape of the NoticeBar (rectangular: sharp; neutral: round corner; rounded: circle/pill shape) | `'rectangular' \| 'neutral' \| 'rounded'` | `'rectangular'` | 5.38.0 |
| bordered | Border visibility of the NoticeBar (`block`: top and bottom border; `true`: full border; `false`: no border) | `'block' \| boolean` | `'block'` | 5.38.0 |

### CSS Variables

| Name | Description | Default | Global | Version |
| --- | --- | --- | --- | --- |
| --background-color | background color | `var(--adm-color-weak)` |
| --border-color | border color | `var(--adm-color-weak)` |
| --font-size | Font size of notice text content. | `15px` |
| --height | Height of the whole element. | `40px` |
| --icon-font-size | Font size of left icon. | `18px` |
| --text-color | text color | `#ffffff` |
| `--adm-notice-bar-border-radius` | Border radius of neutral shape NoticeBar | `4px` | `--adm-notice-bar-border-radius` | 5.38.0 |
| `--adm-notice-bar-border-width` | Border width of bordered NoticeBar | `1px` | `--adm-notice-bar-border-width` | 5.38.0 |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt