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
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!
Copy link