Box
The Box component is a container for other components.
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 |
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
import { whisper } from "@oliveai/ldk"
import {
AlignItems,
ButtonStyle,
CustomHeight,
Direction,
JustifyContent,
Whisper,
WhisperComponentType
} from "@oliveai/ldk/dist/whisper"
const BoxSimpleExample = (async () => {
await whisper.create({
label: 'Box Simple Example',
components: [
{
type: WhisperComponentType.Box,
alignItems: AlignItems.Center,
justifyConntent: JustifyContent.Center,
children: [
{
type: WhisperComponentType.Button,
buttonStyle: ButtonStyle.Secondary,
disabled: false,
label: "NO",
onClick: (error: Error, whisper: Whisper) => {
// do nothing
},
},
{
type: WhisperComponentType.Button,
buttonStyle: ButtonStyle.Primary,
disabled: false,
label: "Yes",
onClick: (error: Error, whisper: Whisper) => {
// do nothing
},
},
],
customHeight: CustomHeight.Large,
direction: Direction.Horizontal,
onClick: (error: Error, whisper: Whisper) => {
// do nothing
}
}
]
})
})
BoxSimpleExample();
import { React, ReactWhisper } from "@oliveai/ldk"
import {
AlignItems,
ButtonStyle,
CustomHeight,
Direction,
JustifyContent
} from "@oliveai/ldk/dist/whisper"
const BoxExample: React.FunctionComponent<Object> = (props) => {
return (
<oh-whisper label='Box Simple Example' onClose={ () => {}}>
<oh-box
alignItems={AlignItems.Center}
direction={Direction.Horizontal}
justifyContent={JustifyContent.Center}
customHeight={CustomHeight.Large}
onClick={() => {
console.log("Clicked");
}}
children={
<>
<oh-button
buttonStyle={ButtonStyle.Secondary}
disabled={false}
label= "NO"
onClick={() => {
// do nothing
}}
/>
<oh-button
buttonStyle={ButtonStyle.Primary}
disabled={false}
label= "Yes"
onClick={() => {
// do nothing
}}
/>
</>
}
/>
</oh-whisper>
)
}
ReactWhisper.renderNewWhisper(<BoxExample />);
Last modified 9mo ago