子要素のレイアウトを定義するコンポーネントです。ボックスにボックスを含めることもできます。
| パラメータ | タイプ | 説明 |
|---|---|---|
| type | string | "box" required |
| layout | string | このボックス内のコンポーネントを配置する方 詳しくは、レイアウト > コンポーネントを配置する方向 を参照してください。 required |
| contents | array of objects | このボックス内のコンポーネント 以下のコンポーネントを指定できます。 • layout プロパティが horizontal または vertical の場合: ボックス、ボタン、画像、テキスト、セパレータ、フィラー • layout プロパティが baseline の場合: アイコン、テキスト、フィラー コンポーネントは配列に書かれた順序に従って描画されます。 required |
| backgroundColor | string | ボックスの背景色 RGB カラー以外にアルファチャンネル(透明度)も設定できます。16 進数カラーコードで設定します。(例：#RRGGBBAA) デフォルト値は #00000000 です。 |
| borderColor | string | ボックスの枠線の色 16 進数カラーコードで設定します。 |
| borderWidth | string | ボックスの枠線の太さ 値はピクセルで指定するか、または none、light、normal、medium、semi-bold、bold のいずれかの値を指定できます。 none では枠線が表示されず、それ以外は列挙した順に枠線が太くなります。 |
| cornerRadius | string | 枠線の角を丸くする時の半径 値はピクセルで指定するか、または none、xs、sm、md、lg、xl、xxl のいずれかの値を指定できます。 none では角が丸くならず、それ以外は列挙した順に半径が大きくなります。 |
| width | string | ボックスの幅 詳しくは、レイアウト > ボックスの幅 を参照してください。 |
| height | string | ボックスの高さ 詳しくは、レイアウト > ボックスの高さ を参照してください。 |
| flex | number | 親要素内における、このコンポーネントの幅または高さの比率。 詳しくは、レイアウト > コンポーネントの幅と高さ を参照してください。 |
| spacing | string | ボックス内におけるコンポーネント間の最小スペース デフォルト値は none です。 詳しくは、レイアウト > ボックスの spacing プロパティ を参照してください。 |
| margin | string | 親要素内での、特定のコンポーネントとその前のコンポーネントとの間に挿入される余白の最小サイズ 詳しくは、レイアウト > コンポーネントの margin プロパティ を参照してください。 |
| paddingAll | string | ボックスの境界線と子要素との間にある余白のサイズ 詳しくは、レイアウト > ボックスのパディング を参照してください。 |
| paddingTop | string | ボックスの上の境界線と子要素の上の境界線との間にある余白のサイズ 詳しくは、レイアウト > ボックスのパディング を参照してください。 |
| paddingBottom | string | ボックスの下の境界線と子要素の下の境界線との間にある余白のサイズ 詳しくは、レイアウト > ボックスのパディング を参照してください。 |
| paddingStart | string | ボックスの左の境界線と子要素の左の境界線との間にある余白のサイズ 詳しくは、レイアウト > ボックスのパディング を参照してください。 |
| paddingEnd | string | ボックスの右の境界線と子要素の右の境界線との間にある余白のサイズ 詳しくは、レイアウト > ボックスのパディング を参照してください。 |
| position | string | このボックスを配置するときの基準となる位置 以下のいずれかの値を指定します。 • relative : 直前のボックスを基準とします。 • absolute : 親要素の左上を基準とします。 デフォルト値は relative です。 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetTop | string | 上側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetBottom | string | 下側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetStart | string | 左側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetEnd | string | 右側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| action | object | ボックスをタップすると実行されるアクション 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 }}