|
@@ -0,0 +1,108 @@
|
|
|
+---
|
|
|
+localeCode: en-US
|
|
|
+order: 0
|
|
|
+category: Basic
|
|
|
+title: Divider
|
|
|
+icon: doc-divider
|
|
|
+brief: Divider is a linear, lightweight component used to logically organize element content and page structure or areas.
|
|
|
+---
|
|
|
+
|
|
|
+## Demos
|
|
|
+
|
|
|
+### How to import
|
|
|
+
|
|
|
+```jsx import
|
|
|
+import { Divider } from '@douyinfe/semi-ui';
|
|
|
+```
|
|
|
+
|
|
|
+### Basic Usage
|
|
|
+
|
|
|
+```jsx live=true
|
|
|
+import React from 'react';
|
|
|
+import { Divider } from '@douyinfe/semi-ui';
|
|
|
+
|
|
|
+() => {
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <h3>Horizontal Solid Line</h3>
|
|
|
+ <span>Semi Design is a design system.</span>
|
|
|
+ <Divider margin='12px'/>
|
|
|
+ <span>It defines a set of components.</span>
|
|
|
+
|
|
|
+ <h3 style={{"marginTop":"40px"}}>Horizontal Dashed Line</h3>
|
|
|
+ <span>Semi Design is a design system.</span>
|
|
|
+ <Divider dashed={true} margin='12px'/>
|
|
|
+ <span>It defines a set of components.</span>
|
|
|
+
|
|
|
+ <h3 style={{"marginTop":"40px"}}>Vertical Solid Line</h3>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <span>Left</span>
|
|
|
+ <Divider layout="vertical" margin='12px'/>
|
|
|
+ <span>Middle</span>
|
|
|
+ <Divider layout="vertical" margin='12px'/>
|
|
|
+ <span>Right</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3 style={{"marginTop":"40px"}}>Vertical Dashed Line</h3>
|
|
|
+ <div>
|
|
|
+ <span>Left</span>
|
|
|
+ <Divider layout="vertical" dashed={true} margin='12px'/>
|
|
|
+ <span>Middle</span>
|
|
|
+ <Divider layout="vertical" dashed={true} margin='12px'/>
|
|
|
+ <span>Right</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+```
|
|
|
+
|
|
|
+### 包含内容
|
|
|
+
|
|
|
+```jsx live=true
|
|
|
+import React from 'react';
|
|
|
+import { Divider, Typography } from '@douyinfe/semi-ui';
|
|
|
+
|
|
|
+() => {
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <Divider margin='12px' align='left'>
|
|
|
+ Left Text
|
|
|
+ </Divider>
|
|
|
+
|
|
|
+ <Divider margin='12px' align='center'>
|
|
|
+ Center Text
|
|
|
+ </Divider>
|
|
|
+
|
|
|
+ <Divider margin='12px' align='right'>
|
|
|
+ Right Text
|
|
|
+ </Divider>
|
|
|
+
|
|
|
+ <Divider margin='12px'>
|
|
|
+ <IconTiktokLogo/>
|
|
|
+ </Divider>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+```
|
|
|
+
|
|
|
+## API Reference
|
|
|
+
|
|
|
+| 属性 | 说明 | 类型 | 默认值 |
|
|
|
+|-----------|---------------------------------------------------------------|-------------|---------|
|
|
|
+| align | Content Align Mode | left \| center \| right | center |
|
|
|
+| children | Content | ReactNode | - |
|
|
|
+| className | ClassName | string | - |
|
|
|
+| dashed | Whether is dashed | boolean | false |
|
|
|
+| layout | Divider Direction | horizontal \| vertical | horizontal |
|
|
|
+| margin | Vertical (Horizontal if in horizontal mode) margin of divider | number \| string | - |
|
|
|
+| style | Custom Style | CSSProperties | - |
|
|
|
+
|
|
|
+## Design Tokens
|
|
|
+<DesignToken/>
|