在 bubble 中,每一个区段都可以新增一个 box,可以想像成 html 中的 div,而 box 之中则可以继续新增 box、image、text、button、filler、separator。
1. box
layout (内容是垂直还水平排版)
参数:baseline、horizontal、vertical
(图一,horizontal)
(图二,vertical)
position
要注意的是,在最上层(不算 header)的 box 不可调整为 absolute。
参数:relative、absolute
flex
可输入大于等于 0 的任意数字。
spacing
该区段下各子区段的间距。
可输入大于等于 0 的 px,或是 xl、lg、md......等 keyword。
(图三,25px)
margin
该区段与外边界的距离。
可输入大于等于 0 的 px,或是 xl、lg、md......等 keyword。
width、height
该区段的宽度、长度,可以输入 px 或 %,不可纯输入数字
(图四,100px)
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