Divider

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

Props: N/A

Examples:

Javascript

import { whisper } from '@oliveai/ldk';
import {
  JustifyContent,
  StyleSize,
  WhisperComponentType,
  Direction,
} from '@oliveai/ldk/dist/whisper/types';

import { WidthSize } from '@oliveai/ldk/dist/whisper';

export const dividerWhisper = async () => {
  await whisper.create({
    label: 'Divider examples',
    components: [
      {
        body: `Divider default.`,
        type: whisper.WhisperComponentType.Markdown,
      },
      {
        type: WhisperComponentType.Divider,
      },
      {
        body: `Divider With margin top large and margin bottom small.`,
        type: whisper.WhisperComponentType.Markdown,
      },
      {
        type: WhisperComponentType.Divider,
        layout: {
          marginTop: StyleSize.Large,
          marginBottom: StyleSize.Small,
        }
      },
      {
        body: `Divider with half width and is a child of whisper.WhisperComponentType.Box with justify content Center.`,
        type: whisper.WhisperComponentType.Markdown,
      },
      {
        type: whisper.WhisperComponentType.Box,
        justifyContent: JustifyContent.Center,
        direction: Direction.Horizontal,
        children: [
          {
            type: WhisperComponentType.Divider,
            layout: {
              width: WidthSize.Half,
            },
          },
        ],
      },
    ],
  });
}

React

import { React, ReactWhisper } from '@oliveai/ldk';
import {   
  JustifyContent,
  StyleSize,
  Direction,
} from '@oliveai/ldk/dist/whisper/types';
import { WidthSize } from '@oliveai/ldk/dist/whisper';

const TestDivider: React.FunctionComponent<Object> = (props) => { 
  return (
    <oh-whisper label='Divider examples' onClose={() => console.debug('closed')}>
      <oh-markdown
        body='Divider default.'
      />
      <oh-divider/>
      <oh-markdown
        body='Divider With margin top large and margin bottom small.'
      />
      <oh-divider
        layout={
          {
            marginTop: StyleSize.Large,
            marginBottom: StyleSize.Small
          }
        }
      />
      <oh-markdown
        body='Divider with half width and is a child of whisper.WhisperComponentType.Box with justify content Center.'
      />
      <oh-box
        justifyContent={JustifyContent.Center}
        direction={Direction.Horizontal}
        children={
          <oh-divider
            layout={
              {
                width: WidthSize.Half
              }
            }
          />
        }
      />
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<TestDivider />);