Divider
Divider will be used to separate content vertically or horizontally.
Usage
import { Divider } from 'stwui';
import Divider from 'stwui/divider';
With Position
<script lang="ts">
import { Divider } from 'stwui';
</script>
<Divider>
<Divider.Label slot="label">Divider</Divider.Label>
</Divider>
<Divider position="left">
<Divider.Label slot="label">Divider</Divider.Label>
</Divider>
<Divider position="right">
<Divider.Label slot="label">Divider</Divider.Label>
</Divider>
Pass What You Want
<script lang="ts">
import { Divider, Button } from 'stwui';
const plus_circle = "svg-path";
</script>
<Divider>
<Divider.Label slot="label"><h3>Divider</h3></Divider.Label>
</Divider>
<Divider>
<Divider.Icon slot="icon" data={plus_circle} />
</Divider>
<Divider>
<Button type="primary">I am a Button</Button>
</Divider>
Divider Props
| position | 'left' | 'center' | 'right' | center |
Divider Slots
| label | <Divider.Label slot="label" /> |
| icon | <Divider.Icon slot="icon" /> |
| default | |
Divider.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Divider Class Identifiers
| stwui-divider |
| stwui-divider-icon |
| stwui-divider-label |
