Divider
A divider defines a thematic break in a page or component.
| Install | yarn add @diallink-corp/convergo-react-divider |
|---|---|
| Version | 4.1.2 |
| Usage | import {Divider} from '@diallink-corp/convergo-react-divider' |
Horizontal Orientation
By default, the divider will be horizontally aligned.
<div style={{display: 'flex', flexDirection: 'column'}}>
<Text>Topic 1</Text>
<Divider />
<Text>Topic 2</Text>
</div><div style={{display: 'flex', flexDirection: 'column'}}>
<Text>Topic 1</Text>
<Divider />
<Text>Topic 2</Text>
</div><div
style={{
display: 'flex',
flexDirection:
'column'
}}
>
<Text>Topic 1</Text>
<Divider />
<Text>Topic 2</Text>
</div>Vertical Orientation
Optionally, you can change the orientation to vertical.
<div style={{display: 'flex'}}>
<Text>Topic 1</Text>
<Divider orientation='vertical' />
<Text>Topic 2</Text>
</div><div style={{display: 'flex'}}>
<Text>Topic 1</Text>
<Divider orientation='vertical' />
<Text>Topic 2</Text>
</div><div
style={{
display: 'flex'
}}
>
<Text>Topic 1</Text>
<Divider orientation="vertical" />
<Text>Topic 2</Text>
</div>Sizes
The divider comes in several sizes.
Vertical Orientation
Optionally, you can change the orientation to vertical.
<div
orientation="vertical"
style={{ display: 'flex', flexDirection: 'column' }}
>
<Text>Topic 1</Text>
<Divider size="small" />
<Text>Topic 2</Text>
<Divider size="medium" />
<Text>Topic 3</Text>
<Divider size="large" />
<Text>Topic 4</Text>
</div><div
orientation="vertical"
style={{ display: 'flex', flexDirection: 'column' }}
>
<Text>Topic 1</Text>
<Divider size="small" />
<Text>Topic 2</Text>
<Divider size="medium" />
<Text>Topic 3</Text>
<Divider size="large" />
<Text>Topic 4</Text>
</div><div
orientation="vertical"
style={{
display: 'flex',
flexDirection:
'column'
}}
>
<Text>Topic 1</Text>
<Divider size="small" />
<Text>Topic 2</Text>
<Divider size="medium" />
<Text>Topic 3</Text>
<Divider size="large" />
<Text>Topic 4</Text>
</div>