[Line] Flex Message - 圖文與按鈕

該筆記重點

• hero 區塊：放置滿版主視覺圖片
• layout-baseline：專門用來把小圖示 (icon) 與文字 (text) 沿著文字底部基準線對齊，該範例內容是應用在星級評分
• footer 區塊 + button 控件
• action.type-uri：點擊後直接開啟外部網頁

Flex Message json 和發出效果

function getCafeCard() {
  return {
    "type": "bubble",
    "size": "mega",
    "hero": {
      "type": "image",
      "url": "https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&w=1000&q=80",
      "size": "full",
      "aspectRatio": "20:13",
      "aspectMode": "cover"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "sm",
      "contents": [
        {
          "type": "text",
          "text": " 圖文與按鈕",
          "weight": "bold",
          "color": "#D97706",
          "size": "xs"
        },
        {
          "type": "text",
          "text": "楓花雪岳 Kaffe",
          "weight": "bold",
          "size": "xl",
          "color": "#1E293B",
          "wrap": true
        },
        {
          "type": "box",
          "layout": "baseline",
          "margin": "md",
          "contents": [
            {
              "type": "icon",
              "size": "sm",
              "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
            },
            {
              "type": "icon",
              "size": "sm",
              "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
            },
            {
              "type": "icon",
              "size": "sm",
              "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
            },
            {
              "type": "icon",
              "size": "sm",
              "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
            },
            {
              "type": "icon",
              "size": "sm",
              "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
            },
            {
              "type": "text",
              "text": "4.9 (128 則評論)",
              "size": "sm",
              "color": "#64748B",
              "margin": "md",
              "flex": 0
            }
          ]
        },
        {
          "type": "box",
          "layout": "vertical",
          "margin": "lg",
          "spacing": "sm",
          "contents": [
            {
              "type": "box",
              "layout": "horizontal",
              "spacing": "sm",
              "contents": [
                {
                  "type": "text",
                  "text": "招牌推薦",
                  "color": "#94A3B8",
                  "size": "sm",
                  "flex": 2
                },
                {
                  "type": "text",
                  "text": "衣索比亞 紫風鈴 ($200)",
                  "wrap": true,
                  "color": "#334155",
                  "size": "sm",
                  "flex": 5
                }
              ]
            },
            {
              "type": "box",
              "layout": "horizontal",
              "spacing": "sm",
              "contents": [
                {
                  "type": "text",
                  "text": "營業時間",
                  "color": "#94A3B8",
                  "size": "sm",
                  "flex": 2
                },
                {
                  "type": "text",
                  "text": "每日10:00 營業（週一公休）",
                  "wrap": true,
                  "color": "#334155",
                  "size": "sm",
                  "flex": 5
                }
              ]
            }
          ]
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "spacing": "sm",
      "flex": 0,
      "contents": [
        {
          "type": "button",
          "style": "primary",
          "height": "sm",
          "color": "#D97706",
          "action": {
            "type": "uri",
            "label": "楓花雪岳官網",
            "uri": "https://jengting.blogspot.com/"
          }
        }
      ]
    }
  };
}

Image

• Size：有三種設定方式，分別為尺寸關鍵字、像素、百分比，預設值為尺寸 md
• aspectRatio：設定圖片顯示區域的寬高比，寬與高的數值範圍為 1-100,000，且高不能超過寬的 3 倍，未設定預設為 1:1
• aspectMode：設定圖片如何填入顯示區域，當原始圖片比例與 aspectRatio 不一致時，就由這個屬性決定顯示方式
• cover：照片放大到填滿寬度，上下部分會被裁掉
• fit：整張照片完整顯示，左右會留下空間

layout-baseline

官方文件 示意圖，直接看圖理解囉

Button

style

• primary：適合深色底的主要按鈕
• secondary：適合淺色底的次要按鈕
• link：文字連結樣式，也是預設值

action 屬性

•  uri：開啟指定網址
• message：點擊後讓使用者在聊天室送出指定文字，可以應用在觸發關鍵字回覆 （可觸發 Webhook 回應）

• 參考資料
• Button
• Image size
• Actions