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

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,
      },
    ],
  });

React Example

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