LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Example:

Was this helpful?

  1. Whisper Components

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:

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

Last updated 3 years ago

Was this helpful?