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
1
import { whisper } from '@oliveai/ldk';
2
import {
3
  AlignItems,
4
  Color,
5
  GridDirection,
6
  IconSize,
7
  JustifyContent,
8
  Wrap,
9
  WhisperComponentType,
10
} from '@oliveai/ldk/dist/whisper/types';
11
​
12
await whisper.create({
13
  label: 'Grid Component Example',
14
  components: [
15
    {
16
      type: WhisperComponentType.Markdown,
17
      body: "This Grid's direction is column.",
18
    },
19
    {
20
      alignItems: AlignItems.Center,
21
      type: WhisperComponentType.Grid,
22
      direction: GridDirection.Column,
23
      children: [
24
        {
25
          type: WhisperComponentType.Icon,
26
          name: 'account_balance_wallet',
27
          size: IconSize.XLarge,
28
          color: Color.Black,
29
          tooltip: 'Wallet Icon',
30
        },
31
        {
32
          type: WhisperComponentType.Markdown,
33
          body: 'Sample text.',
34
        },
35
        {
36
          type: WhisperComponentType.Markdown,
37
          body: 'Sample text2.',
38
        },
39
        {
40
          type: WhisperComponentType.Button,
41
          label: 'Button',
42
          onClick: () => {
43
            console.log('button clicked');
44
          },
45
        },
46
      ],
47
      container: true,
48
      spacing: 0,
49
      wrap: Wrap.Wrap,
50
      xs: 'false',
51
    },
52
    {
53
      type: WhisperComponentType.Divider,
54
    },
55
    {
56
      type: WhisperComponentType.Markdown,
57
      body: "This Grid's default direction is row.",
58
    },
59
    {
60
      alignItems: AlignItems.Center,
61
      type: WhisperComponentType.Grid,
62
      direction: GridDirection.Row,
63
      justifyContent: JustifyContent.SpaceEvenly,
64
      children: [
65
        {
66
          type: WhisperComponentType.Markdown,
67
          body: 'Sample text1.',
68
        },
69
        {
70
          type: WhisperComponentType.Markdown,
71
          body: 'Sample text2.',
72
        },
73
      ],
74
      container: true,
75
      spacing: 0,
76
      wrap: Wrap.WrapReverse,
77
      xs: 'auto',
78
    },
79
    {
80
      type: WhisperComponentType.Divider,
81
    },
82
    {
83
      type: WhisperComponentType.Markdown,
84
      body: '2 rows and 3 columns:',
85
    },
86
    {
87
      alignItems: AlignItems.Center,
88
      type: WhisperComponentType.Grid,
89
      children: [
90
        {
91
          alignItems: AlignItems.Center,
92
          type: WhisperComponentType.Grid,
93
          children: [
94
            {
95
              type: WhisperComponentType.Markdown,
96
              body: 'Row 1 Col 1',
97
            },
98
            {
99
              type: WhisperComponentType.Markdown,
100
              body: 'Row 2 Col 1',
101
            },
102
            {
103
              type: WhisperComponentType.Markdown,
104
              body: 'Row 3 Col 1',
105
            },
106
          ],
107
          container: true,
108
          spacing: 0,
109
          wrap: Wrap.Wrap,
110
          xs: '4',
111
        },
112
        {
113
          alignItems: AlignItems.Center,
114
          type: WhisperComponentType.Grid,
115
          children: [
116
            {
117
              type: WhisperComponentType.Markdown,
118
              body: 'Row 1 Col 2',
119
            },
120
            {
121
              type: WhisperComponentType.Markdown,
122
              body: 'Row 2 Col 2',
123
            },
124
            {
125
              type: WhisperComponentType.Markdown,
126
              body: 'Row 3 Col 2',
127
            },
128
          ],
129
          item: true,
130
          spacing: 0,
131
          wrap: Wrap.NoWrap,
132
          xs: '8',
133
        },
134
      ],
135
      container: true,
136
      spacing: 0,
137
      wrap: Wrap.NoWrap,
138
      },
139
    ],
140
  });
Copied!
1
import { React, ReactWhisper } from '@oliveai/ldk';
2
import {
3
  AlignItems, 
4
  Color, 
5
  GridDirection, 
6
  IconSize, 
7
  JustifyContent, 
8
  Wrap,
9
} from '@oliveai/ldk/dist/whisper/types';
10
  
11
const GridReactSample: React.FunctionComponent<Object> = (props) => (
12
  <oh-whisper label="Grid Component Example" onClose={() => console.debug('closed')}>
13
    <oh-markdown body="This Grid's direction is column." />
14
    <oh-grid alignItems={AlignItems.Center} direction={GridDirection.Column} 
15
    container={true} spacing={0} wrap={Wrap.Wrap} xs='false'>
16
      <oh-icon
17
        name="account_balance_wallet"
18
        size={IconSize.XLarge}
19
        color={Color.Black}
20
        tooltip="Wallet Icon"
21
      />
22
      <oh-markdown body="Sample text" />
23
      <oh-markdown body="Sample text2" />
24
      <oh-button
25
        label="Button"
26
        onClick={() => {
27
          console.log('button clicked');
28
        }}
29
      />
30
    </oh-grid>
31
    <oh-divider/>
32
    <oh-markdown body="This Grid's default direction is row."/>
33
    <oh-grid alignItems={AlignItems.Center} direction={GridDirection.Row} 
34
    justifyContent={JustifyContent.SpaceEvenly} container={true} spacing={0} wrap={Wrap.WrapReverse} xs='auto'>
35
      <oh-markdown body="Sample text1." />
36
      <oh-markdown body="Sample text2." />
37
    </oh-grid>
38
    <oh-divider/>
39
    <oh-markdown body="2 rows and 3 columns:"/>
40
    <oh-grid alignItems={AlignItems.Center} direction={GridDirection.Row} 
41
    justifyContent= {JustifyContent.SpaceEvenly} container={true} spacing = {0} wrap = {Wrap.NoWrap}>
42
      <oh-grid container={true} spacing={0} wrap={Wrap.Wrap} xs='4' >
43
        <oh-markdown body="Row 1 Col 1" />
44
        <oh-markdown body="Row 2 Col 1" />
45
        <oh-markdown body="Row 3 Col 1" />
46
      </oh-grid>
47
      <oh-grid container={true} spacing={0} wrap={Wrap.NoWrap} xs='8' >
48
        <oh-markdown body="Row 1 Col 2" />
49
        <oh-markdown body="Row 2 Col 2" />
50
        <oh-markdown body="Row 3 Col 2" />
51
      </oh-grid>
52
    </oh-grid>
53
  </oh-whisper>
54
);
55
ReactWhisper.renderNewWhisper(<GridReactSample />);
Copied!
Whisper Components - Previous
Chart
Next - Whisper Components
Checkbox
Last modified 16d ago
Copy link
Contents
Props:
Example: