Divider
The divider component provides a way to implement a 1px horizontal line to separate sections of a Whisper.

Props: N/A

Examples:

Javascript
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
JustifyContent,
4
StyleSize,
5
WhisperComponentType,
6
Direction,
7
} from '@oliveai/ldk/dist/whisper/types';
8
9
import { WidthSize } from '@oliveai/ldk/dist/whisper';
10
11
export const dividerWhisper = async () => {
12
await whisper.create({
13
label: 'Divider examples',
14
components: [
15
{
16
body: `Divider default.`,
17
type: whisper.WhisperComponentType.Markdown,
18
},
19
{
20
type: WhisperComponentType.Divider,
21
},
22
{
23
body: `Divider With margin top large and margin bottom small.`,
24
type: whisper.WhisperComponentType.Markdown,
25
},
26
{
27
type: WhisperComponentType.Divider,
28
layout: {
29
marginTop: StyleSize.Large,
30
marginBottom: StyleSize.Small,
31
}
32
},
33
{
34
body: `Divider with half width and is a child of whisper.WhisperComponentType.Box with justify content Center.`,
35
type: whisper.WhisperComponentType.Markdown,
36
},
37
{
38
type: whisper.WhisperComponentType.Box,
39
justifyContent: JustifyContent.Center,
40
direction: Direction.Horizontal,
41
children: [
42
{
43
type: WhisperComponentType.Divider,
44
layout: {
45
width: WidthSize.Half,
46
},
47
},
48
],
49
},
50
],
51
});
52
}
53
Copied!
1
import { React, ReactWhisper } from '@oliveai/ldk';
2
import {
3
JustifyContent,
4
StyleSize,
5
Direction,
6
} from '@oliveai/ldk/dist/whisper/types';
7
import { WidthSize } from '@oliveai/ldk/dist/whisper';
8
9
const TestDivider: React.FunctionComponent<Object> = (props) => {
10
return (
11
<oh-whisper label='Divider examples' onClose={() => console.debug('closed')}>
12
<oh-markdown
13
body='Divider default.'
14
/>
15
<oh-divider/>
16
<oh-markdown
17
body='Divider With margin top large and margin bottom small.'
18
/>
19
<oh-divider
20
layout={
21
{
22
marginTop: StyleSize.Large,
23
marginBottom: StyleSize.Small
24
}
25
}
26
/>
27
<oh-markdown
28
body='Divider with half width and is a child of whisper.WhisperComponentType.Box with justify content Center.'
29
/>
30
<oh-box
31
justifyContent={JustifyContent.Center}
32
direction={Direction.Horizontal}
33
children={
34
<oh-divider
35
layout={
36
{
37
width: WidthSize.Half
38
}
39
}
40
/>
41
}
42
/>
43
</oh-whisper>
44
);
45
};
46
47
ReactWhisper.renderNewWhisper(<TestDivider />);
Copied!
Copy link