容器元件

容器元件需被放置在 header、body 或 footer 的 do ... end 之中。

Horizontal Box

說明

Kamiflex 會為 Horizontal Box 新增一個 box，並且將該 box 的 layout 引數設成 horizontal，關於 box 的說明請參考官方文件中的 LINE Flex Message 關於 BOX 的 API Reference。

可用的引數

說明

  • layout
  • backgroundColor
  • borderColor
  • borderWidth
  • cornerRadius
  • width
  • height
  • flex
  • spacing
  • margin
  • paddingAll
  • paddingTop
  • paddingBottom
  • paddingStart
  • paddingEnd
  • position
  • offsetTop
  • offsetBottom
  • offsetStart
  • offsetEnd
  • action
  • justifyContent
  • alignItems
  • background.type
  • background.angle
  • background.startColor
  • background.endColor
  • background.centerColor
  • background.centerPosition

區塊中的方法

說明

使用範例

Ruby 寫法：

json = Kamiflex.json(self) do
  bubble do
    body do
      horizontal_box backgroundColor: "#f2f2f2",cornerRadius: "20px" do
        text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",wrap:true,color:"#ff0000",flex: 2
        text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",wrap:true,color:"#0000ff",flex: 2
      end
    end
  end
end

puts json

對應的 JSON：

{
  "type": "flex",
  "altText": "this is a flex message",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "text",
              "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              "wrap": true,
              "color": "#ff0000",
              "flex": 2
            },
            {
              "type": "text",
              "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              "wrap": true,
              "color": "#0000ff",
              "flex": 2
            }
          ],
          "backgroundColor": "#f2f2f2",
          "cornerRadius": "20px"
        }
      ]
    }
  }
}

Vertical Box

說明

Kamiflex 會為 Vertical Box 新增一個 box，並且將該 box 的 layout 引數設成 vertical，關於 box 的說明請參考官方文件中的 LINE Flex Message 關於 BOX 的 API Reference。

可用的引數

說明

  • layout
  • backgroundColor
  • borderColor
  • borderWidth
  • cornerRadius
  • width
  • height
  • flex
  • spacing
  • margin
  • paddingAll
  • paddingTop
  • paddingBottom
  • paddingStart
  • paddingEnd
  • position
  • offsetTop
  • offsetBottom
  • offsetStart
  • offsetEnd
  • action
  • justifyContent
  • alignItems
  • background.type
  • background.angle
  • background.startColor
  • background.endColor
  • background.centerColor
  • background.centerPosition

區塊中的方法

說明

使用範例

Ruby 寫法：

json = Kamiflex.json(self) do
  bubble do
    body do
      vertical_box backgroundColor: "#f2f2f2",cornerRadius: "20px" do
        text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",wrap:true,color:"#ff0000",flex: 2
        text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",wrap:true,color:"#0000ff",flex: 2
      end
    end
  end
end

puts json

對應的 JSON：

{
  "type": "flex",
  "altText": "this is a flex message",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "text",
              "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              "wrap": true,
              "color": "#ff0000",
              "flex": 2
            },
            {
              "type": "text",
              "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              "wrap": true,
              "color": "#0000ff",
              "flex": 2
            }
          ],
          "backgroundColor": "#f2f2f2",
          "cornerRadius": "20px"
        }
      ]
    }
  }
}

Baseline Box

說明

Kamiflex 會為 Baseline Box 新增一個 box，並且將該 box 的 layout 引數設成 baseline，關於 box 的說明請參考官方文件中的 LINE Flex Message 關於 BOX 的 API Reference。

關於 baseline_box 與 horizontal_box 的差別，請查看官方文件中的 Characteristics of a baseline box

可用的引數

說明

  • layout
  • backgroundColor
  • borderColor
  • borderWidth
  • cornerRadius
  • width
  • height
  • flex
  • spacing
  • margin
  • paddingAll
  • paddingTop
  • paddingBottom
  • paddingStart
  • paddingEnd
  • position
  • offsetTop
  • offsetBottom
  • offsetStart
  • offsetEnd
  • action
  • justifyContent
  • alignItems
  • background.type
  • background.angle
  • background.startColor
  • background.endColor
  • background.centerColor
  • background.centerPosition

區塊中的方法

說明

使用範例

Ruby 寫法：

json = Kamiflex.json(self) do
  bubble do
    body do
      baseline_box backgroundColor: "#f2f2f2",cornerRadius: "20px" do
        text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",wrap:true,color:"#ff0000",flex: 2
        text "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",wrap:true,color:"#0000ff",flex: 2
      end
    end
  end
end

puts json

對應的 JSON：

{
  "type": "flex",
  "altText": "this is a flex message",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "box",
          "layout": "baseline",
          "contents": [
            {
              "type": "text",
              "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              "wrap": true,
              "color": "#ff0000",
              "flex": 2
            },
            {
              "type": "text",
              "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
              "wrap": true,
              "color": "#0000ff",
              "flex": 2
            }
          ],
          "backgroundColor": "#f2f2f2",
          "cornerRadius": "20px"
        }
      ]
    }
  }
}

results matching ""

    No results matching ""