Links

Grid

The responsive layout grid adapts to Olive Helps size and orientation, ensuring consistency across layouts.

Props:

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.

Example:

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 />);