用 Python 畅玩 Line bot - 15:Flex Message(二)

在 bubble 中,每一个区段都可以新增一个 box,可以想像成 html 中的 div,而 box 之中则可以继续新增 box、image、text、button、filler、separator。

1. box

layout (内容是垂直还水平排版)

参数:baseline、horizontal、vertical

(图一,horizontal)
http://img2.58codes.com/2024/20142564agCFqY4SQo.png

(图二,vertical)
http://img2.58codes.com/2024/2014256410L1lMbd4d.png

position
要注意的是,在最上层(不算 header)的 box 不可调整为 absolute。

参数:relative、absolute

flex
可输入大于等于 0 的任意数字。

spacing
该区段下各子区段的间距。
可输入大于等于 0 的 px,或是 xl、lg、md......等 keyword。

(图三,25px)
http://img2.58codes.com/2024/20142564EsTn3aa19s.png

margin
该区段与外边界的距离。
可输入大于等于 0 的 px,或是 xl、lg、md......等 keyword。

width、height
该区段的宽度、长度,可以输入 px 或 %,不可纯输入数字

(图四,100px)
http://img2.58codes.com/2024/20142564jrcgoQwyyN.png

backgroundColor
该区段的背景颜色
可以输入 #RRGGBB 或 #RRGGBBAA

borderWidth
边界的宽度,可输入大于等于 0 的 px,或是 xl、lg、md......等 keyword。

borderColor
该区段边界的颜色
可以输入 #RRGGBB 或 #RRGGBBAA

cornerRadius
边角的弧度,可以输入 0~360px,超过360的等同于360,此处 px 可以当作角度来看。或是可以选取 xl、lg、md......等 keyword,但最大的 xxl 不等同于 360px。

justifyContent
等同于 css 中的 justifyContent

参数:center、flex-start、flex-end、space-between、space-around、space-evenly

alignItems
该区段整体靠哪侧对齐

参数:center、flex-start、flex-end

Offset

offsetTop、offsetBottom、offsetStart、offsetEnd
该区段离上/下/左/右预留多少空间,可输入大于等于 0 的 px,或是 xl、lg、md......等 keyword。

Padding

paddingAll、paddingTop、paddingBottom、paddingStart、paddingEnd
该区段的内距预留多少空间

Background

type

参数:linegradient
angle:渐层色的呈现角度,只能输入大于等于0的数字,单位为 deg
startColor、centerColor、endColor:颜色从 startColor 到 centerColor 到 endcolor,只可输入#RRGGBB 或 #RRGGBBAA。centerColor 可以不填写。

Action

当点击到该区块时,所要执行的对应动作。
type

postback
uri
message
datetimepicker


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章