Divider
The divider component provides a way to implement a 1px horizontal line to separate sections of a Whisper.
Javascript
React
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,
},
},
],
},
],
});
}
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 />);
Last modified 8mo ago