Box

A container that lays out its contents in one direction. Box provides general CSS capabilities like flexbox layout, paddings, background color, border, and animation.

Interface: IBox.

See the parameters of this component in storybook.

Extra parameters

children

The box components.

Type: array of Components

Example: [inputComponent]

To set borders to the Box component, use a stroke or the IBorderProp interface.

Example

import {Components, type IBox, type IInput, type InputGroup} from "@onlyoffice/docspace-plugin-sdk"

const nameInputProps: IInput = {
  value: "",
  onChange: () => {},
  scale: true,
  placeholder: "",
}

const inputComponent: InputGroup = {
  component: Components.input,
  props: nameInputProps,
}

const inputBox: IBox = {
  marginProp: "0 0 24px",
  children: [inputComponent],
}