Icon
아이콘(icon)은 문자열을 꾸며주는 아이콘을 표시하는 컴포넌트이다. 아이콘은 baseline box에서만 사용할 수 있다.
Request {#icon-request-parameter}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| type | string | Y | icon 으로 고정. |
| url | string | Y | 이미지 URL (PNG 형식 권장, HTTPS만 허용). 최대 크기: 1MB 최대 글자수: 1,000자 |
| 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 | 오른쪽 오프셋. 자세한 내용은 오프셋을 참고한다. |
| size | string | N | 아이콘의 최대 너비.xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl 중 하나의 값을 지정한다.열거된 순으로 아이콘의 너비가 증가한다. 기본값은 md 이다. |
| aspectRatio | string | N | 아이콘의 비율. {width}:{height} 형식으로 지정한다.1~10000 사이의 값으로 {width} 와 {height} 값을 지정해야 한다.단, {height} 값은 {width} 값의 3배를 초과할 수 없다.기본값은 1:1 이다. |
※ 아이콘 컴포넌트의 flex 속성값은 0 으로 고정된다.
Request Example {#icon-request-example}
{ "type": "bubble", "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png", "size": "md" }, { "type": "text", "text": "How may I help you?", "size": "md", "margin": "sm" } ] }, { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png", "size": "lg" }, { "type": "text", "text": "How may I help you?", "size": "lg", "margin": "sm" } ] }, { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png", "size": "xl" }, { "type": "text", "text": "How may I help you?", "size": "xl", "margin": "sm" } ] }, { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png", "size": "xxl" }, { "type": "text", "text": "How may I help you?", "size": "xxl", "margin": "sm" } ] }, { "type": "box", "layout": "baseline", "contents": [ { "type": "icon", "url": "https://developers.worksmobile.com/image/en/bot/message_type/icon.png", "size": "3xl" }, { "type": "text", "text": "How may I help you?", "size": "3xl", "margin": "sm" } ] } ] }}