{children}
diff --git a/src/packages/divider/doc.en-US.md b/src/packages/divider/doc.en-US.md
index ccb2085d59742c03eab7cce9da426b3a9f7f2366..95524a3a3ca4efa0bf7d745da8427c1bb1bec628 100644
--- a/src/packages/divider/doc.en-US.md
+++ b/src/packages/divider/doc.en-US.md
@@ -1,71 +1,165 @@
-# Divider 分割线
+# Divider
-### 介绍
+### Intro
-用于将内容分隔为多个区域。
+Separate content into multiple areas.
-### 安装
+### Install
```js
import { Divider } from '@nutui/nutui-react';
```
-## 代码演示
+### Basic Usage
-### 基础用法
+Default render one horizontal divider line.
-默认渲染一条水平分割线。
+:::demo
-```jsx
-
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
+
+ );
+};
+export default App;
```
+:::
+
+
+### With Text
-### 展示文本
+Insert text into divider with default slot.
-通过插槽在可以分割线中间插入内容。
+:::demo
-```jsx
-
文本
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
Text
+
+ );
+};
+export default App;
```
+:::
+
-### 内容位置
+### Content Position
-通过 contentPosition 指定内容所在位置。
+Set Content Position with `contentPosition` attribute.
-```jsx
-
文本
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
Text
+
Text
+
+ );
+};
+export default App;
```
+:::
-### 虚线
-添加 dashed 属性使分割线渲染为虚线。
+### Dashed
-```jsx
-
文本
+Render dashed divider line with `dashed` attribute.
+
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
Text
+
+ );
+};
+export default App;
+```
+:::
+
+
+### Custom Style
+
+User can custom divider style with `styles` attribute.
+
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
Text
+
+ );
+};
+export default App;
```
+:::
-### 自定义样式
+### Vertical Divider
-可以直接通过 styles 属性设置分割线的样式。
+:::demo
-```jsx
-
文本
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
+
+ );
+};
+export default App;
```
+:::
+
## API
### Props
-| 参数 | 说明 | 类型 | 默认值 |
+| Attribute | Description | Type | Default |
| --------------- | ----------------------------- | ------- | ------ |
-| dashed | 是否使用虚线 | Boolean | false |
-| hairline | 是否使用 0.5px 线 | Boolean | true |
-| contentPosition | 内容位置，可选值为 left right | String | center |
-| styles | 修改自定义样式 | css | - |
+| 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 | Default slot |
diff --git a/src/packages/divider/doc.md b/src/packages/divider/doc.md
index ccb2085d59742c03eab7cce9da426b3a9f7f2366..e67bdba248086123d633c3e0f17884ebe98a865d 100644
--- a/src/packages/divider/doc.md
+++ b/src/packages/divider/doc.md
@@ -16,42 +16,137 @@ import { Divider } from '@nutui/nutui-react';
默认渲染一条水平分割线。
-```jsx
-
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
+
+ );
+};
+export default App;
```
+:::
+
### 展示文本
通过插槽在可以分割线中间插入内容。
-```jsx
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
+ );
+};
+export default App;
```
+:::
+
### 内容位置
通过 contentPosition 指定内容所在位置。
-```jsx
-
文本
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
文本
+
+ );
+};
+export default App;
```
+:::
+
### 虚线
添加 dashed 属性使分割线渲染为虚线。
-```jsx
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
+ );
+};
+export default App;
```
+:::
+
### 自定义样式
可以直接通过 styles 属性设置分割线的样式。
-```jsx
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
+ );
+};
+export default App;
```
+:::
+
+### 垂直分割线
+
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
+
+ );
+};
+export default App;
+```
+:::
+
## API
@@ -62,7 +157,8 @@ import { Divider } from '@nutui/nutui-react';
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置，可选值为 left right | String | center |
-| styles | 修改自定义样式 | css | - |
+| styles | 修改自定义样式 | CSS | - |
+| direction | 水平还是垂直类型,可选值为 horizontal vertical | String | 'horizontal' |
### Slots
diff --git a/src/packages/divider/doc.zh-TW.md b/src/packages/divider/doc.zh-TW.md
index ccb2085d59742c03eab7cce9da426b3a9f7f2366..e67bdba248086123d633c3e0f17884ebe98a865d 100644
--- a/src/packages/divider/doc.zh-TW.md
+++ b/src/packages/divider/doc.zh-TW.md
@@ -16,42 +16,137 @@ import { Divider } from '@nutui/nutui-react';
默认渲染一条水平分割线。
-```jsx
-
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
+
+ );
+};
+export default App;
```
+:::
+
### 展示文本
通过插槽在可以分割线中间插入内容。
-```jsx
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
+ );
+};
+export default App;
```
+:::
+
### 内容位置
通过 contentPosition 指定内容所在位置。
-```jsx
-
文本
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
文本
+
+ );
+};
+export default App;
```
+:::
+
### 虚线
添加 dashed 属性使分割线渲染为虚线。
-```jsx
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
+ );
+};
+export default App;
```
+:::
+
### 自定义样式
可以直接通过 styles 属性设置分割线的样式。
-```jsx
-
文本
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
文本
+
+ );
+};
+export default App;
```
+:::
+
+### 垂直分割线
+
+:::demo
+
+```tsx
+import React from "react";
+import { Divider } from '@nutui/nutui-react';
+
+const App = () => {
+ return (
+ <>
+
+
+ );
+};
+export default App;
+```
+:::
+
## API
@@ -62,7 +157,8 @@ import { Divider } from '@nutui/nutui-react';
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置，可选值为 left right | String | center |
-| styles | 修改自定义样式 | css | - |
+| styles | 修改自定义样式 | CSS | - |
+| direction | 水平还是垂直类型,可选值为 horizontal vertical | String | 'horizontal' |
### Slots
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 929b3a04f9fb0c03aa7d3689a19aaf1c01e1ebe8..fd6686f24743b345cb68c2b8882fee49beff099a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -453,3 +453,16 @@ $circleprogress-primary-color: $primary-color !default;
$circleprogress-path-color: #e5e9f2 !default;
$circleprogress-text-color: #000000 !default;
$circleprogress-text-size: $font-size-3 !default;
+
+// divider
+
+$divider-margin: 16px 0 !default;
+$divider-text-font-size: $font-size-2 !default;
+$divider-text-color: #909ca4 !default;
+$divider-line-height: 2px !default;
+$divider-before-margin-right: 16px !default;
+$divider-after-margin-left: 16px !default;
+$divider-vertical-height: 12px !default;
+$divider-vertical-top: 2px !default;
+$divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default;
+$divider-vertical-margin: 0 8px !default;