박스(box)는 하위 컴포넌트의 레이아웃을 정의하는 컴포넌트이다. 박스 하위에 박스를 추가하는 것도 가능하다.
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| type | string | Y | box 로 고정. |
| layout | string | Y | 박스에서 컴포넌트를 배치하는 방향. 자세한 내용은 컴포넌트 배치 방향을 참고한다. |
| contents | array of objects | Y | 박스의 컴포넌트. 다음과 같은 타입의 컴포넌트를 추가할 수 있다. • layout 속성값이 horizontal 또는 vertical 인 경우:box, button, image, text, separator, filler • layout 속성값이 baseline 인 경우:icon, text, filler 하위에 추가된 컴포넌트는 배열에 지정된 순서에 따라 표시된다. |
| backgroundColor | string | N | 블록의 배경색. RGB 색상 외에 알파 채널(투명도)도 설정할 수 있다. Hex 색상 코드로 지정한다(예: #RRGGBBAA). 기본값은 #00000000 이다. |
| borderColor | string | N | 박스의 테두리 색상. Hex 색상 코드로 지정한다. |
| borderWidth | string | N | 박스 테두리의 두께. 픽셀값을 직접 입력하거나, none, light, normal, medium, semi-bold, bold 중 하나의 값을 지정할 수 있다.none 으로 지정하면 테두리가 표시되지 않으며, 그 외의 값들은 열거된 순으로 테두리 두께가 두꺼워진다. |
| cornerRadius | string | N | 테두리 모서리를 둥글게 설정. 픽셀값을 직접 입력하거나, none, xs, sm, md, lg, xl, xxl 중 하나의 값을 지정할 수 있다.none 으로 지정하면 모서리가 둥글게 설정되지 않으며, 그 외의 값들은 열거된 순으로 모서리를 더 둥글게 만든다.기본값은 none 이다. |
| width | string | N | 박스의 너비. 자세한 내용은 박스의 너비를 참고한다. |
| height | string | N | 박스의 높이. 자세한 내용은 박스의 높이를 참고한다. |
| flex | number | N | 상위 컴포넌트 내 컴포넌트들의 너비 또는 높이의 비율. 자세한 내용은 컴포넌트의 너비 및 높이를 참고한다. |
| spacing | string | N | 박스 내 컴포넌트들 사이의 최소 간격. 기본값은 none 이다. 자세한 내용은 박스의 spacing 속성을 참고한다. |
| margin | string | N | 상위 컴포넌트 내 특정 컴포넌트와 이전 컴포넌트와의 최소 간격. 자세한 내용은 컴포넌트의 margin 속성을 참고한다. |
| paddingAll | string | N | 박스 테두리와 해당 박스에 추가된 컴포넌트 사이의 간격. 자세한 내용은 박스 패딩을 참고한다. |
| paddingTop | string | N | 박스 위쪽 테두리와 해당 박스에 추가된 컴포넌트 위쪽 테두리 사이의 간격. 자세한 내용은 박스 패딩을 참고한다. |
| paddingBottom | string | N | 박스 아래쪽 테두리와 해당 박스에 추가된 컴포넌트 아래쪽 테두리 사이의 간격. 자세한 내용은 박스 패딩을 참고한다. |
| paddingStart | string | N | 박스 왼쪽 테두리와 해당 박스에 추가된 컴포넌트 왼쪽 테두리 사이의 간격. 자세한 내용은 박스 패딩을 참고한다. |
| paddingEnd | string | N | 박스 오른쪽 테두리와 해당 박스에 추가된 컴포넌트 오른쪽 테두리 사이의 간격. 자세한 내용은 박스 패딩을 참고한다. |
| position | string | N | 박스를 배치하는 위치. 다음 값 중 하나를 지정한다. • relative: 이전 박스가 기준이 된다.• absolute: 부모 컴포넌트의 왼쪽 상단이 기준이 된다.기본값은 relative 이다. 자세한 내용은 오프셋을 참고한다. |
| offsetTop | string | N | 상단 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetBottom | string | N | 하단 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetStart | string | N | 왼쪽 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetEnd | string | N | 오른쪽 오프셋. 자세한 내용은 오프셋을 참고한다. |
| action | object | N | 박스를 탭하면 실행되는 액션. 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://naver.worksmobile.com" }, "color": "#2432AB" } ], "flex": 0 }}