Divider

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!

Whisper Components - Previous

Date Time

Next - Whisper Components

DropZone

Last modified 21d ago

Copy link

Contents

Props: N/A

Examples: