# 组件通用说明
每个组件都包含属性、事件和样式。其中大部分功能以及设置方式相同,本节对组件的通用属性做详细说明。
# 属性
# 基础信息
- 组件名称:由字母、数字和下划线组成,用于在表达式中引用、权限上报等场景。
- 是否控制权限:是否通过账号与权限中心控制该组件的权限。
- 显示条件(If):是否展示组件,可通过表达式设置组件显示的条件,当条件为True时显示,为False时隐藏该组件。
# 主要属性
每个组件的主要属性均不相同,这里说明比较通用的属性,组件特有的属性在每个组件的说明文档中详细阐述。
- 颜色:不同的组件系统会内置一组场景色,常见的有主要色、成功色、警告色、错误色、危险色等。
- 尺寸:设置组件大小,常见的有迷你、小、正常、大、巨大。
- 展示方式:行内展示、块级展示(占据整行)。
- 只读:正常显示,但禁止选择或输入。
- 禁用:置灰显示,且禁止任何交互(焦点、点击、选择、输入等)。
- 文本:组件中需要展示的文本内容。
- 动态绑定:组件的所有主要属性都支持动态绑定,可以选择变量,设置表达式。
# 样式属性
- 字体颜色:支持通过表达式或变量动态控制组件字体颜色,颜色格式常见的表示方法如下:
- 英文表达法:使用英文单词进行颜色的表示,比如red,blue等,该表达方式能直接表示的颜色较少。
- 十六进制表达法:表示形式为“#”加上6位16进制数,如#ffffff。
- RGB表达法:表示形式为rgb(a,b,c),“a”、“b”、“c”三个参数分别表示红,绿,蓝的颜色值,由0到255的十进制表示,如rgb(255,255,0)。
- RGBA表达法:表示形式为rgba(a,b,c,d),“a”、“b”、“c”三个参数分别表示红,绿,蓝的颜色值,由0到255的十进制表示;“d”表示透明度,由0到1之间的小数表示,0为完全透明,1为不透明,如rgba(255,255,0,0.5)。
- 背景颜色:支持通过表达式或变量动态控制组件背景颜色,颜色格式常见的表示方法如下:
- 英文表达法:使用英文单词进行颜色的表示,比如red,blue等,该表达方式能直接表示的颜色较少。
- 十六进制表达法:表示形式为“#”加上6位16进制数,如#ffffff。
- RGB表达法:表示形式为rgb(a,b,c),“a”、“b”、“c”三个参数分别表示红,绿,蓝的颜色值,由0到255的十进制表示,如rgb(255,255,0)。
- RGBA表达法:表示形式为rgba(a,b,c,d),“a”、“b”、“c”三个参数分别表示红,绿,蓝的颜色值,由0到255的十进制表示;“d”表示透明度,由0到1之间的小数表示,0为完全透明,1为不透明,如rgba(255,255,0,0.5)。
- 背景图片:支持通过表达式或变量动态控制组件背景图片,填入内容为图片URL。
# 事件
每个组件有不同的事件,每个事件均可绑定相关逻辑。
每个组件可以设置多个事件。
事件包含鼠标事件、手势事件、键盘事件和组件事件等,常见的事件列表如下:
事件名 触发条件 点击后 手指单击指定区域
# 样式
# 布局
宽度:默认auto(自动),可手动设置宽度,单位为px。
高度:默认auto(自动),可手动设置高度,单位为px。
对齐:可选择左对齐、居中对齐、右对齐。
背景颜色:组件的背景颜色,支持点选颜色或直接输入RGB值。
外边距:上下左右四个方向设置组件外部的边距值,单位px。默认开启样式关联,即上下左右边距中一个值发生变化后,其余值会随之变化。
内边距:上下左右四个方向设置组件内部的边距值,单位px。默认开启样式关联,即上下左右边距中一个值发生变化后,其余值会随之变化。
定位模式:支持默认定位、绝对定位、固定定位、相对定位四种模式。
- 默认定位:自适应模式,开启后不显示定位值相关选项。
- 绝对定位:以最近的非默认定位父级组件,来进行相对位置的定位,开启后显示定位值相关选项。
- 固定定位:固定到屏幕某个位置(如底部),不跟随屏幕滚动,开启后显示定位值相关选项。
- 相对定位:以自身位置设置偏移量来定位,开启后显示定位值相关选项。
定位值:支持选择并定义上下左右的边距值,单位为px。
展示层级:定义组件层级关系,层级数越大的展示越靠上。
# 字体
样式:可设置加粗、斜体和下划线。
字号:组件的字体大小。
颜色:组件的字体颜色,支持点选颜色或直接输入RGB值。
# 边框
样式:可选实线或虚线。
颜色:组件边框颜色,支持点选颜色或直接输入RGB值。
线条:设置组件边框的粗细值,单位px。默认开启样式关联,即上下左右中一个值发生变化后,其余值会随之变化。
圆角:设置组件边框的弧度值,单位px。默认开启样式关联,即上下左右中一个值发生变化后,其余值会随之变化。
# 自定义
支持自定义css样式,例如: