Span
스팬(span)은 단일 행에 서로 다른 디자인의 여러 문자열을 표시하는 컴포넌트이다.
각 문자열의 색상, 크기, 두께, 스타일을 지정할 수 있다. 스팬은 텍스트 컴포넌트의 contents 속성에 작성한다.
스팬은 text 컴포넌트와 동일하게 다국어로 전송할 수 있으며, 다국어 메시지는 클라이언트의 단말기 언어 설정에 맞게 표시된다.
Request {#span-request-parameter}
| 파라미터 | 타입 | 필수 여부 | 설명 |
|---|---|---|---|
| type | string | Y | span 으로 고정. |
| text | string | Y | 표시되는 문자열. 상위 텍스트 컴포넌트의 wrap 속성이 true 이면, 개행 문자(\n)를 사용해 줄 바꿈 처리할 영역을 지정할 수 있다. |
| color | string | N | 문자열 색상. Hex 색상 코드로 지정한다. |
| size | string | N | 문자열 크기. xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl 중 하나의 값을 지정한다.열거된 순으로 문자열의 크기가 커진다. 기본값은 md 이다. |
| weight | string | N | 문자열 두께. regular 또는 bold 중 하나의 값을 지정한다.bold 로 지정하면 문자열이 굵게 처리된다.기본값은 regular 이다. |
| style | string | N | 문자열 스타일. 다음 중 하나의 값을 지정한다: • normal: 스타일 없음• italic: 기울임꼴기본값은 normal 이다. |
| decoration | string | N | 문자열 꾸미기. 다음 중 하나의 값을 지정한다: • none: 꾸미기 없음• underline: 밑줄• line-through: 취소선기본값은 none 이다. |
※ 텍스트 컴포넌트의 decoration 속성에 지정한 값은 스팬 컴포넌트에 지정한 decoration 속성을 덮어쓰지 않는다.
Request Example {#span-request-example}
{ "type": "bubble", "body": { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "contents": [ { "type": "span", "text": "Hello, world!", "decoration": "line-through", "size": "xl" }, { "type": "span", "text": "\nThe work site ", "color": "#ff0000", "size": "sm", "weight": "bold" }, { "type": "span", "text": "begins to", "size": "md", "color": "#00ff00", "decoration": "underline", "weight": "bold" }, { "type": "span", "text": " move", "color": "#0000ff", "weight": "bold", "size": "lg" } ], "align": "center", "wrap": true } ] }}