Grid
The responsive layout grid adapts to Olive Helps size and orientation, ensuring consistency across layouts.
Properties | Descriptions | Required | Default |
|---|---|---|---|
alignContent | It sets the distribution of space between and around content items along a grid's block axis. Options: FlexStart | FlexEnd | Center | SpaceBetween | SpaceAround | Stretch | stretch | |
alignItems | It controls the alignment of items on the Block Axis within their grid area. | flex-start | |
children | The child components | undefined | |
direction | It controls how they are aligned. Options: Row | RowReverse | Column | ColumnReverse | row | |
justifyContent | It controls distribution between and around content items | flex-start | |
spacing | It controls space between children | 0 | |
wrap | Options: NoWrap | WrapReverse | Wrap | nowrap | |
xs | xs is one of grid breakpoints. Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.A value given to a breakpoint applies to all the other breakpoints wider than it is (unless overridden, as you can read later in this page). For example, xs={12} sizes a component to occupy the whole viewport width regardless of its size. | false | |
container | container is a layout. container and item are mutually exclusive | | |
item | item is a layout. container and item are mutually exclusive | |
When
container and item both exist or they both not exist: If
xs exists, the props would be : container: false, item: true. If
xs doesn't exist, the props would be: container: true, item: false.
TypeScript Example
React Example
import { whisper } from '@oliveai/ldk';
import {
AlignItems,
Color,
GridDirection,
IconSize,
JustifyContent,
Wrap,
WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
await whisper.create({
label: 'Grid Component Example',
components: [
{
type: WhisperComponentType.Markdown,
body: "This Grid's direction is column.",
},
{
alignItems: AlignItems.Center,
type: WhisperComponentType.Grid,
direction: GridDirection.Column,
children: [
{
type: WhisperComponentType.Icon,
name: 'account_balance_wallet',
size: IconSize.XLarge,
color: Color.Black,
tooltip: 'Wallet Icon',
},
{
type: WhisperComponentType.Markdown,
body: 'Sample text.',
},
{
type: WhisperComponentType.Markdown,
body: 'Sample text2.',
},
{
type: WhisperComponentType.Button,
label: 'Button',
onClick: () => {
console.log('button clicked');
},
},
],
container: true,
spacing: 0,
wrap: Wrap.Wrap,
xs: 'false',
},
{
type: WhisperComponentType.Divider,
},
{
type: WhisperComponentType.Markdown,
body: "This Grid's default direction is row.",
},
{
alignItems: AlignItems.Center,
type: WhisperComponentType.Grid,
direction: GridDirection.Row,
justifyContent: JustifyContent.SpaceEvenly,
children: [
{
type: WhisperComponentType.Markdown,
body: 'Sample text1.',
},
{
type: WhisperComponentType.Markdown,
body: 'Sample text2.',
},
],
container: true,
spacing: 0,
wrap: Wrap.WrapReverse,
xs: 'auto',
},
{
type: WhisperComponentType.Divider,
},
{
type: WhisperComponentType.Markdown,
body: '2 rows and 3 columns:',
},
{
alignItems: AlignItems.Center,
type: WhisperComponentType.Grid,
children: [
{
alignItems: AlignItems.Center,
type: WhisperComponentType.Grid,
children: [
{
type: WhisperComponentType.Markdown,
body: 'Row 1 Col 1',
},
{
type: WhisperComponentType.Markdown,
body: 'Row 2 Col 1',
},
{
type: WhisperComponentType.Markdown,
body: 'Row 3 Col 1',
},
],
container: true,
spacing: 0,
wrap: Wrap.Wrap,
xs: '4',
},
{
alignItems: AlignItems.Center,
type: WhisperComponentType.Grid,
children: [
{
type: WhisperComponentType.Markdown,
body: 'Row 1 Col 2',
},
{
type: WhisperComponentType.Markdown,
body: 'Row 2 Col 2',
},
{
type: WhisperComponentType.Markdown,
body: 'Row 3 Col 2',
},
],
item: true,
spacing: 0,
wrap: Wrap.NoWrap,
xs: '8',
},
],
container: true,
spacing: 0,
wrap: Wrap.NoWrap,
},
],
});
import { React, ReactWhisper } from '@oliveai/ldk';
import {
AlignItems,
Color,
GridDirection,
IconSize,
JustifyContent,
Wrap,
} from '@oliveai/ldk/dist/whisper/types';
const GridReactSample: React.FunctionComponent<Object> = (props) => (
<oh-whisper label="Grid Component Example" onClose={() => console.debug('closed')}>
<oh-markdown body="This Grid's direction is column." />
<oh-grid alignItems={AlignItems.Center} direction={GridDirection.Column}
container={true} spacing={0} wrap={Wrap.Wrap} xs='false'>
<oh-icon
name="account_balance_wallet"
size={IconSize.XLarge}
color={Color.Black}
tooltip="Wallet Icon"
/>
<oh-markdown body="Sample text" />
<oh-markdown body="Sample text2" />
<oh-button
label="Button"
onClick={() => {
console.log('button clicked');
}}
/>
</oh-grid>
<oh-divider/>
<oh-markdown body="This Grid's default direction is row."/>
<oh-grid alignItems={AlignItems.Center} direction={GridDirection.Row}
justifyContent={JustifyContent.SpaceEvenly} container={true} spacing={0} wrap={Wrap.WrapReverse} xs='auto'>
<oh-markdown body="Sample text1." />
<oh-markdown body="Sample text2." />
</oh-grid>
<oh-divider/>
<oh-markdown body="2 rows and 3 columns:"/>
<oh-grid alignItems={AlignItems.Center} direction={GridDirection.Row}
justifyContent= {JustifyContent.SpaceEvenly} container={true} spacing = {0} wrap = {Wrap.NoWrap}>
<oh-grid container={true} spacing={0} wrap={Wrap.Wrap} xs='4' >
<oh-markdown body="Row 1 Col 1" />
<oh-markdown body="Row 2 Col 1" />
<oh-markdown body="Row 3 Col 1" />
</oh-grid>
<oh-grid container={true} spacing={0} wrap={Wrap.NoWrap} xs='8' >
<oh-markdown body="Row 1 Col 2" />
<oh-markdown body="Row 2 Col 2" />
<oh-markdown body="Row 3 Col 2" />
</oh-grid>
</oh-grid>
</oh-whisper>
);
ReactWhisper.renderNewWhisper(<GridReactSample />);
Last modified 1yr ago