アイコン
隣接したテキストを装飾するためのアイコンを表示するコンポーネントです。このコンポーネントは、ベースラインボックス 内でのみ使用できます。
Request Content {#icon-request-parameter}
| パラメータ | タイプ | 説明 |
|---|---|---|
| type | string | "icon" required |
| url | string | 画像の URL (PNG 形式、HTTPS のみ可能) 最大文字数：1,000 文字 required |
| margin | string | 親要素内での、特定のコンポーネントとその前のコンポーネントとの間に挿入される余白の最小サイズ 詳しくは、レイアウト > コンポーネントの margin プロパティ を参照してください。 |
| position | string | offsetTop、offsetBottom、offsetStart、offsetEnd の基準 以下のいずれかの値を指定します。 • relative : 直前のボックスを基準とします。 • absolute : 親要素の左上を基準とします。 デフォルト値は relative です。 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetTop | string | 上側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetBottom | string | 下側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetStart | string | 左側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| offsetEnd | string | 右側のオフセット 詳しくは、レイアウト > オフセット を参照してください。 |
| size | string | アイコンの最大幅 xxs、xs、sm、md、lg、xl、xxl、3xl、4xl、5xl のいずれかの値を指定できます。 列挙した順にアイコンのサイズが大きくなります。 デフォルト値は md です。 |
| aspectRatio | string | アイコンのアスペクト比 {width}:{height} の形で指定します。 {width} および {height} の値は 1 から 100,000 の範囲で指定します。 ただし、{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" } ] } ] }}