#  NoticeBar 

### Intro

Used to display a group of message notifications in a continuons loop.

### Install

```javascript
import { NoticeBar } from '@nutui/nutui-react-native';
```

## Demo

### Basic Usage

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { NoticeBar } from '@nutui/nutui-react-native';

const App = () => {
    const text = 'Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.'
    return (
      <>
        <NoticeBar text={text} />
      </>
    )
}
export default App
```
:::

### Scrollable
Scrolling is automatically enabled when the content length of the notification bar overflows, which can be controlled through the scrollable property.

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { NoticeBar } from '@nutui/nutui-react-native';

const App = () => {
    return (
      <>
        <NoticeBar
            text="Nutui is a mobile terminal component library."
            scrollable
        />

        <NoticeBar 
            text="Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience." 
            scrollable={false} 
        />
      </>
    )
}
export default App
```
:::


### Mode

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { NoticeBar } from '@nutui/nutui-react-native';

const App = () => {
    const hello = () => {
        // console.log('hello world')
    }
    return (
      <>
       <NoticeBar closeMode click={hello}>
          Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.
        </NoticeBar>

        <NoticeBar closeMode rightIcon="circle-close" click={hello}>
          Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.
        </NoticeBar>

        <NoticeBar 
          leftIcon="https://img13.360buyimg.com/imagetools/jfs/t1/72082/2/3006/1197/5d130c8dE1c71bcd6/e48a3b60804c9775.png"
        >
          Jingdong
        </NoticeBar>
      </>
    )
}
export default App
```
:::


### Wrapable

When text is long, you can enable multi-line display by setting the wrapable property.

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { NoticeBar } from '@nutui/nutui-react-native';

const App = () => {
    const text = 'Nutui is a Jingdong style mobile terminal component library. It uses Vue language to write applications that can be used on H5 and applet platforms to help R & D personnel improve development efficiency and development experience.'
    
    return (
      <NoticeBar text={text} wrapable />
    )
}
export default App
```
:::

### Vertical Scroll

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { NoticeBar } from '@nutui/nutui-react-native';

const App = () => {
    const horseLamp1 = ['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']
    const go = (item: any) => {
        // console.log(item)
    }
    return (
        <>
          <NoticeBar
            direction="vertical"
            list={horseLamp1}
            speed={10}
            standTime={1000}
            onClick={(item: any) => {
              go(item)
            }}
            closeMode
          />
        </>
    )
}
export default App
```
:::



### Vertical Scroll Complex Animation

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { NoticeBar } from '@nutui/nutui-react-native';

const App = () => {
     const horseLamp2 = ['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox'];
    return (
      <>
        <NoticeBar
            direction="vertical"
            list={horseLamp2}
            speed={10}
            standTime={2000}
            complexAm
        />
      </>
    )
}
export default App
```
:::


### Vertical Scroll Custom Style

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { Text } from 'react-native';
import { NoticeBar } from '@nutui/nutui-react-native';

const App = () => {
    const  horseLamp3 = ['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']

    return (
      <>
        <NoticeBar direction="vertical" height={50} speed={10} standTime={1000}>
        {horseLamp3.map((item, index) => {
            return (
              <Text
                style={{ height: 50, lineHeight: 50 }}
                key={index}
              >
                {item}
              </Text>
            )
        })}
        </NoticeBar>
      </>
    )
};
export default App
```
:::



### Vertical Scroll Custom Right Icon

:::demo

```SnackPlayer name=NoticeBar&dependencies=@nutui/nutui-react-native
import  React, {useState} from "react";
import { NoticeBar,Icon } from '@nutui/nutui-react-native';

const App = () => {
     const horseLamp1 = ['NoticeBar', 'Cascader', 'DatePicker', 'CheckBox']
    return (
      <>
        <NoticeBar
            className="custom"
            direction="vertical"
            list={horseLamp1}
            speed={10}
            standTime={1000}
            rightIcon={<Icon name="fabulous" size={16}+ color="#f0250f" />}
        />
        </>
    )
};
export default App
```
:::


## API

### Prop

| Attribute     | Description                                               | Type          | Default |
| ---------- | ---------------------------------------------------------- | ------------- | ------ |
| direction  | Rolling direction                                  | String        | across  |
| text       | Notice text content                                | String        |  -      |
| closeMode  | Whether to enable the off mode                     | Boolean       | false   |
| leftIcon   | Left Icon                                          | String        | -       |
| rightIcon  | Right Icon                                         | String        | -       |
| color      | Text Color                                         | String        | -       |
| background | Background                                         | String        | -       |
| delay      | Delay time                                         | String/Number | 1       |
| scrollable | Whether to scroll content                          | Boolean       | true    |
| speed      | Scrolling speed (px/s)                             | Number         | 50      |
| wrapable`v1.3.0` | Whether to enable text wrap                        | Boolean       | false    |

### Prop（direction=vertical）

| Attribute    | Description                             | Type     | Default          |
|--------------|-----------------------------------------|----------|------------------|
| list         | List                                    | Array    | []               |
| speed        | Scrolling speed                         | Number   | 50               |
| standTime    | Show time(millisecond)                  | Number   | 1000             |
| complexAm    | Complex animation                       | Boolean  | false            |
| height       | height                                  | Number   | 40               |
| closeMode    | Whether to enable the off mode          | Boolean  | false            |

### Slots

| Attribute         | Description                      |
|-------------------|----------------------------------|
| default           | Notice text content              |
| rightIcon        | Custom right icon                |
| leftIcon         | Custom left icon                 |
### Event

| Attribute  | Description                             | Arguments     |
| ---------- | --------------------------------------- | ------------ |
| onClick      | Emitted when NoticeBar is clicked       | event: Event |
| onClose      | Emitted when NoticeBar is closed        | event: Event |

