This component is used to define the layout of a child component. It can also include a box as a child component.
| Parameter | Type | Required | Description |
|---|---|---|---|
| type | string | Y | Set this parameter to box. |
| layout | string | Y | Component layout direction in the box. For more information, see Layout direction of components. |
| contents | array of objects | Y | Components of the box. You can add the following types of components: • If the layout property is horizontal or vertical:box, button, image, text, separator, filler • If the layout property is baseline:icon, text, filler The added components are displayed in the order specified in the array. |
| backgroundColor | string | N | Block background color. You can set an alpha channel (transparency) as well as an RGB color. Set a hex color code (e.g. #RRGGBBAA). The default value is #00000000. |
| borderColor | string | N | Border color Set a hex color code. |
| borderWidth | string | N | Border width. You can enter a pixel value directly, or specify one of the following values: none, light, normal, medium, semi-bold, and bold.none does not set a border while the other values set a border, with the border width increasing in the order they are listed. |
| cornerRadius | string | N | Set the border corners to be rounded. You can enter a pixel value directly, or specify one of the following values: none, xs, sm, md, lg, xl, and xxl.none does not round the border corners while the other values do, with the radius increasing in the order they are listed.The default value is none. |
| width | string | N | Box width. For more information, see Box width. |
| height | string | N | Box height. For more information, see Box height. |
| flex | number | N | The proportion of the width or height of the components within the parent component. For more information, see Width and height of components. |
| spacing | string | N | The minimum space between components in the box. The default value is none. For more information, see spacing. |
| margin | string | N | The minimum space between a specific component and the previous component in the parent component. For more information, see margin. |
| paddingAll | string | N | The space between the box border and the component added to the box. For more information, see Box padding. |
| paddingTop | string | N | The space between the upper border of the box and the upper border of the component added to the box. For more information, see Box padding. |
| paddingBottom | string | N | The space between the lower border of the box and the lower border of the component added to the box. For more information, see Box padding. |
| paddingStart | string | N | The space between the left border of the box and the left border of the component added to the box. For more information, see Box padding. |
| paddingEnd | string | N | The space between the right border of the box and the right border of the component added to the box. For more information, see Box padding. |
| position | string | N | The position of the box. Specify one of the following values: • relative: Uses the previous box as the reference point.• absolute: Uses the upper left corner of the parent component as the reference point.The default value is relative. For more information, see Offset. |
| offsetTop | string | N | Top offset. For more information, see Offset. |
| offsetBottom | string | N | Bottom offset. For more information, see Offset. |
| offsetStart | string | N | Left offset. For more information, see Offset. |
| offsetEnd | string | N | Right offset. For more information, see Offset. |
| action | object | N | The action that occurs when the box is tapped. Specify an action object. |
{ "type": "bubble", "size": "kilo", "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "Welcome to the team!", "color": "#222222", "weight": "bold", "size": "md", "align": "center" }, { "type": "box", "layout": "vertical", "contents": [ { "type": "image", "url": "https://developers.worksmobile.com/image/en/bot/message_type/06-thomas-business-hr-staff.png", "size": "sm", "aspectMode": "cover", "align": "center" } ], "margin": "xxl", "cornerRadius": "50px", "borderWidth": "1px", "borderColor": "#22222220", "height": "60px", "width": "60px", "offsetStart": "85px", "offsetEnd": "85px" }, { "type": "text", "text": "Kyle Baron", "weight": "bold", "size": "lg", "margin": "md", "align": "center" }, { "type": "box", "layout": "baseline", "contents": [ { "type": "text", "text": "kylebaron@designer.com", "size": "sm", "color": "#666666", "wrap": true, "align": "center" } ] }, { "type": "text", "text": "Please edit your detail information.", "color": "#aaaaaa", "size": "sm", "wrap": true, "align": "center", "margin": "lg" } ] }, "footer": { "type": "box", "layout": "vertical", "spacing": "sm", "contents": [ { "type": "button", "style": "primary", "height": "sm", "action": { "type": "uri", "label": "Edit Profile", "uri": "https://line-works.com" }, "color": "#2432AB" } ], "flex": 0 }}