---
title: Divider 分割线
---

# Divider 分割线

The dividing line that separates the content.

## Basic usage

Divide the text of different paragraphs.

:::example

divider/basic-usage

:::

## Custom content

You can customize the content on the divider line.

:::example

divider/custom-content

:::

## dashed line

You can set the style of divider.

:::example

divider/line-dashed

:::

## Vertical divider

:::example

divider/vertical-divider

:::

## API

### Attributes

| Name             | Description                                                | Type                                                                                                                                        | Default    |
| ---------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| direction        | Set divider's direction                                    | ^[enum]`'horizontal' \| 'vertical'`                                                                                                         | horizontal |
| border-style     | Set the style of divider                                   | ^[enum]`'none' \| 'solid' \| 'hidden' \| 'dashed' \| ...` [css/border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style) | solid      |
| content-position | The position of the customized content on the divider line | ^[enum]`'left' \| 'right' \| 'center'`                                                                                                      | center     |

### Slots

| Name    | Description                            |
| ------- | -------------------------------------- |
| default | Customized content on the divider line |