# 组件通用说明

每个组件都包含属性、事件和样式。其中大部分功能以及设置方式相同,本节对组件的通用属性做详细说明。

# 属性

# 基础信息

  • 组件名称:由字母、数字和下划线组成,用于在表达式中引用、权限上报等场景。
  • 是否控制权限:是否通过账号与权限中心控制该组件的权限。
  • 显示条件(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值。

    image-20221107150120475

# 边框

  • 样式:可选实线或虚线。

  • 颜色:组件边框颜色,支持点选颜色或直接输入RGB值。

  • 线条:设置组件边框的粗细值,单位px。默认开启样式关联,即上下左右中一个值发生变化后,其余值会随之变化。

  • 圆角:设置组件边框的弧度值,单位px。默认开启样式关联,即上下左右中一个值发生变化后,其余值会随之变化。

    image-20221107150205546

# 自定义

  • 支持自定义css样式,例如:

    image-20221107150240773

上次更新: 2023年06月14日