Button
버튼(button)을 표시하는 컴포넌트이다. 버튼을 탭하면 지정된 액션이 실행된다.
Request {#button-request-parameter}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| type | string | Y | button 으로 고정. |
| action | string | Y | 버튼을 탭하면 실행되는 액션. Action object를 지정한다. |
| flex | number | N | 상위 컴포넌트 내 해당 컴포넌트의 너비 또는 높이의 비율. 자세한 내용은 컴포넌트의 너비 및 높이를 참고한다. |
| margin | string | N | 상위 컴포넌트 내 해당 컴포넌트와 이전 컴포넌트와의 최소 간격. 자세한 내용은 컴포넌트의 margin 속성을 참고한다. |
| position | string | N | offsetTop, offsetBottom, offsetStart, offsetEnd 속성의 기준. 다음의 속성값 중 하나를 지정한다:• relative: 이전 박스를 기준점으로 잡는다.• absolute: 상위 컴포넌트의 왼쪽 상단을 기준점으로 잡는다.기본값은 relative 이다. 자세한 내용은 오프셋을 참고한다. |
| offsetTop | string | N | 상단 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetBottom | string | N | 하단 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetStart | string | N | 왼쪽 오프셋. 자세한 내용은 오프셋을 참고한다. |
| offsetEnd | string | N | 오른쪽 오프셋. 자세한 내용은 오프셋을 참고한다. |
| height | string | N | 버튼의 높이. sm 또는 md 중 하나의 값을 지정한다. 기본값은 md 이다. |
| style | string | N | 버튼의 스타일. 다음의 값 중 하나를 지정한다. • primary: 진한 색상의 버튼 스타일• secondary: 연한 색상의 버튼 스타일• link: HTML 링크 스타일기본값은 link 이다. |
| color | string | N | style 속성이 _link_일 때 버튼의 글자색.style 속성이 primary 또는 _secondary_일 때 버튼의 배경색.Hex 색상 코드로 지정한다. |
| gravity | string | N | 수직 정렬 방식. 자세한 내용은 수직 정렬을 참고한다. |
Request Example {#button-request-example}
{ "type": "bubble", "body": { "type": "box", "layout": "vertical", "spacing": "md", "contents": [ { "type": "button", "style": "primary", "action": { "type": "uri", "label": "Primary style button", "uri": "http://worksmobile.com" } }, { "type": "button", "style": "secondary", "action": { "type": "uri", "label": "Secondary style button", "uri": "http://worksmobile.com" } }, { "type": "button", "style": "link", "action": { "type": "uri", "label": "Link style button", "uri": "http://worksmobile.com" } } ] }}