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

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

React

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