Box

The Box component is a container for other components.

Props:

PropertiesDescription 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.

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();

Last updated