Box
The Box component is a container for other components.

Props:

Properties
Description
Required?
Default
alignItems
AlignItems.Center: Aligns content to center of box
AlignItems.FlexStart: Aligns content to start of box AlignItems.FlexEnd:
Aligns content to end of box AlignItems.Stretch: Aligns content to stretch evenly over length of box
undefined
children
Array of components inside of box
undefined
customHeight
Set height for box, options are: CustomHeight.Small, CustomHeight.Medium, CustomHeight.Large, or CustomHeight.ExtraLarge
undefined
direction
Set direction of box options are: Direction.Horizontal, or Direction.Vertical
undefined
justifyContent
Set how the box children fill the space of the box: JustifyContent, JustifyContent.Center, JustifyContent.Left, JustifyContent.Right, JustifyContent.Normal, JustifyContent.FlexStart, JustifyContent.FlexEnd, JustifyContent.SpaceAround, JustifyContent.SpaceBetween, or JustifyContent.SpaceEvenly
undefined
onClick
Callback function that executes when the component is clicked
undefined

Examples

In this example, we will make a Whisper that has a Box component with two children. Both of the children will be buttons that will be placed side by side.
TypeScript
React
1
import { whisper } from "@oliveai/ldk"
2
import {
3
AlignItems,
4
ButtonStyle,
5
CustomHeight,
6
Direction,
7
JustifyContent,
8
Whisper,
9
WhisperComponentType
10
} from "@oliveai/ldk/dist/whisper"
11
12
const BoxSimpleExample = (async () => {
13
await whisper.create({
14
label: 'Box Simple Example',
15
components: [
16
{
17
type: WhisperComponentType.Box,
18
alignItems: AlignItems.Center,
19
justifyConntent: JustifyContent.Center,
20
children: [
21
{
22
type: WhisperComponentType.Button,
23
buttonStyle: ButtonStyle.Secondary,
24
disabled: false,
25
label: "NO",
26
onClick: (error: Error, whisper: Whisper) => {
27
// do nothing
28
},
29
},
30
{
31
type: WhisperComponentType.Button,
32
buttonStyle: ButtonStyle.Primary,
33
disabled: false,
34
label: "Yes",
35
onClick: (error: Error, whisper: Whisper) => {
36
// do nothing
37
},
38
},
39
],
40
customHeight: CustomHeight.Large,
41
direction: Direction.Horizontal,
42
onClick: (error: Error, whisper: Whisper) => {
43
// do nothing
44
}
45
}
46
]
47
})
48
})
49
50
BoxSimpleExample();
51
Copied!
1
import { React, ReactWhisper } from "@oliveai/ldk"
2
import {
3
AlignItems,
4
ButtonStyle,
5
CustomHeight,
6
Direction,
7
JustifyContent
8
} from "@oliveai/ldk/dist/whisper"
9
10
const BoxExample: React.FunctionComponent<Object> = (props) => {
11
return (
12
<oh-whisper label='Box Simple Example' onClose={ () => {}}>
13
<oh-box
14
alignItems={AlignItems.Center}
15
direction={Direction.Horizontal}
16
justifyContent={JustifyContent.Center}
17
customHeight={CustomHeight.Large}
18
onClick={() => {
19
console.log("Clicked");
20
}}
21
children={
22
<>
23
<oh-button
24
buttonStyle={ButtonStyle.Secondary}
25
disabled={false}
26
label= "NO"
27
onClick={() => {
28
// do nothing
29
}}
30
/>
31
<oh-button
32
buttonStyle={ButtonStyle.Primary}
33
disabled={false}
34
label= "Yes"
35
onClick={() => {
36
// do nothing
37
}}
38
/>
39
</>
40
}
41
/>
42
</oh-whisper>
43
)
44
}
45
46
ReactWhisper.renderNewWhisper(<BoxExample />);
47
Copied!
Copy link