# Divider 

### Introduce

Separate content into multiple areas.

### Install

```js
import { Divider } from '@nutui/nutui-react-native';
```
### code demo
### Basic Usage

Default render one horizontal divider line.

:::demo

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

const App = () => {
  return (
    <>
      <Divider />
    </>
  );
};
export default App;
```
:::


### With Text

Insert text into divider with default slot.

:::demo

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

const App = () => {
  return (
    <>
        <Divider>Text</Divider>
    </>
  );
};
export default App;
```
:::


### Content Position

Set Content Position with `contentPosition` attribute.

:::demo

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

const App = () => {
  return (
    <>
        <Divider contentPosition="left">Text</Divider>
        <Divider contentPosition="right">Text</Divider>
    </>
  );
};
export default App;
```
:::


### Dashed

Render dashed divider line with `dashed` attribute.

:::demo

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

const App = () => {
  return (
    <>
        <Divider dashed>Text</Divider>
    </>
  );
};
export default App;
```
:::


### Custom Style

User can custom divider style with `styles` attribute.

:::demo

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

const App = () => {
  return (
    <>
        <Divider 
          styles={{ 
            color: '#1989fa', 
            borderColor: '#1989fa',
            paddingLeft: 10,
            paddingRight: 10,
            marginBottom: 20
          }}
        >
          Text
        </Divider>
    </>
  );
};
export default App;
```
:::

### Vertical Divider

:::demo

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

const App = () => {
  return (
    <>
      <View
          style={{ flexDirection: 'row', alignItems: 'center' }}
        >
          <Text>{translated.text}</Text>
          <Divider direction='vertical' />
          <Text>{translated.link}</Text>
          <Divider direction='vertical' />
          <Text>{translated.link}</Text>
      </View>
    </>
  );
};
export default App;
```
:::


## API

### Props

| Attribute            | Description                       | Type    | Default |
| --------------- | ----------------------------- | ------- | ------ |
| dashed          | Whether to use dashed border                  | Boolean | false  |
| hairline        | Whether to use hairline             | Boolean | true   |
| contentPosition | Content position, can be set to left or right   | String  | center |
| styles          | Modify custom styles                | CSS     | -      |
| direction           | The direction of divider, can be set to horizontal or vertical            | String     | 'horizontal'      |

### Slots

| Name    | Description |
| ------- | ---- |
| default | Default slot |
