Grid - Olive Developer Documentation

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 />);
Whisper Components - Previous
CollapseBox
Next - Whisper Components
Checkbox
Last modified 4mo ago
Copy link
On this page
Props:
Example: