@line/bot-sdk • Docs

---

@line/bot-sdk / FlexBox

Type Alias: FlexBox

FlexBox: object & Offset

This is a component that defines the layout of child components. You can also include a box in a box.

Type declaration

action?

optional action: Action

Action performed when this button is tapped.

Specify an action object.

alignItems?

optional alignItems: "flex-start" | "center" | "flex-end"

How child elements are aligned along the cross axis of the parent element. For more information, see Arranging a box's child elements and free space in the Messaging API documentation.

background?

optional background: Background

backgroundColor?

optional backgroundColor: string

Background color of the block. In addition to the RGB color, an alpha channel (transparency) can also be set. Use a hexadecimal color code. (Example:#RRGGBBAA) The default value is #00000000.

borderColor?

optional borderColor: string

Color of box border. Use a hexadecimal color code.

borderWidth?

optional borderWidth: string | "none" | "light" | "normal" | "medium" | "semi-bold" | "bold"

Width of box border. You can specify a value in pixels or any one of none, light, normal, medium, semi-bold, or bold. none does not render a border while the others become wider in the order of listing.

contents

contents: FlexComponent[]

Components in this box. Here are the types of components available:

• When the layout property is horizontal or vertical:
  • Box
  • button
  • image
  • text
  • separator
  • filler
  • spacer (not recommended)
• When the layout property is baseline:
  • icon
  • text
  • filler
  • spacer (not recommended)

cornerRadius?

optional cornerRadius: string | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"

Radius at the time of rounding the corners of the border. You can specify a value in pixels or any one of none, xs, sm, md, lg, xl, or xxl. none does not round the corner while the others increase in radius in the order of listing. The default value is none.

flex?

optional flex: number

The ratio of the width or height of this box within the parent box. The default value for the horizontal parent box is 1, and the default value for the vertical parent box is 0.

For more information, see Width and height of components.

height?

optional height: string

Height of the box. For more information, see Height of a box in the API documentation.

justifyContent?

optional justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly"

How child elements are aligned along the main axis of the parent element. If the parent element is a horizontal box, this only takes effect when its child elements have their flex property set equal to 0. For more information, see Arranging a box's child elements and free space in the Messaging API documentation.

layout

layout: "horizontal" | "vertical" | "baseline"

The placement style of components in this box. Specify one of the following values:

• horizontal: Components are placed horizontally. The direction property of the bubble container specifies the order.
• vertical: Components are placed vertically from top to bottom.
• baseline: Components are placed in the same way as horizontal is specified except the baselines of the components are aligned.

For more information, see Types of box layouts.

margin?

optional margin: string | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"

Minimum space between this box and the previous component in the parent box.

• none does not set a space while the other values set a space whose size increases in the order of listing.
• The default value is the value of the spacing property of the parent box.
• If this box is the first component in the parent box, the margin property will be ignored.

maxHeight?

optional maxHeight: string

Max height of the box. For more information, see Max height of a box in the API documentation.

maxWidth?

optional maxWidth: string

Max width of the box. For more information, see Max width of a box in the API documentation.

paddingAll?

optional paddingAll: string

Free space between the borders of this box and the child element. For more information, see Box padding in the API documentation.

paddingBottom?

optional paddingBottom: string

Free space between the border at the lower end of this box and the lower end of the child element. For more information, see Box padding in the API documentation.

paddingEnd?

optional paddingEnd: string

Free space between the border at the right end of this box and the right end of the child element. For more information, see Box padding in the API documentation.

paddingStart?

optional paddingStart: string

Free space between the border at the left end of this box and the left end of the child element. For more information, see Box padding in the API documentation.

paddingTop?

optional paddingTop: string

Free space between the border at the upper end of this box and the upper end of the child element. For more information, see Box padding in the API documentation.

spacing?

optional spacing: string | "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl"

Minimum space between components in this box.

• none does not set a space while the other values set a space whose size increases in the order of listing.
• The default value is none.
• To override this setting for a specific component, set the margin property of that component.

type

type: "box"

width?

optional width: string

Width of the box. For more information, see Width of a box in the API documentation.

Defined in

lib/types.ts:1078