# 变更记录
| 产品版本 | 更新内容 | 更新日期 |
| --- | --- | --- |
| V7.0.1 | 完善了表格样式属性设置，支持设置表头背景色，满足用户通过表头颜色快速分类数据的需求 | 2024-10-24 |
# 1 功能介绍
样式属性是每个控件在设计器右侧样式栏可以设置的属性，本对照表记录了样式属性的使用方法，便于使用时对照查询。
# 2 样式属性说明
| 属性名 | 类型 | 默认值 | 属性说明 |
| --- | --- | --- | --- |
| 字体大小 | 整数 | 12 | 用于设置文字的字体大小 |
| 字重 | 下拉 | 正常 | 用于设置文字的粗细 |
| 前景色 | 颜色选择器 | - | 用于设置文字的字体颜色 |
| 背景色 | 颜色选择器 | - | 用于设置控件的背景颜色 |
| 圆角半径 | 宽高选择器 | - | 用于设置控件边框的圆角属性 |
| 侧轴对齐 | 下拉 | 默认 | |
| 堆叠顺序 | 整数 | 0 | 用于设置控件的层级，当两个控件重叠时，堆叠顺序高的显示在前面 |
| 自定义样式 | 弹框选择 | - | 用于给控件设置自己指定的样式 |
| 边框样式 | - | - | 用于设置外边距、边框大小以及内边距的样式 |
| 值域字体大小 | 整数 | 12 | 用于设置字段值部分的字体大小 |
| 值域前景色 | 颜色选择器 | - | 用于设置字段值部分的字体颜色 |
| 值域背景色 | 颜色选择器 | | 用于设置字段值部分的背景颜色 |
| 值域对齐方式 | 下拉 | 默认 | 用于设置字段值部分的对齐方式 |
| 宽度 | 宽高选择器 | | 用于设置控件的宽度 |
| 高度 | 宽高选择器 | | 用于设置控件的高度 |
| 占整行 | 复选框 | false | 当使用字段布局容器时有该属性，可以控制字段是否独占一行显示 |
| 扩展比率 | 整数 | 1 | 用于设置容器的扩展比率 |
| 压缩比率 | 整数 | 1 | 用于设置容器的压缩比率 |
| 背景图片 | 弹框选择 | - | 用于给容器设置背景图片 |
| 背景图重复 | 下拉 | 默认 | 用于容器控件尺寸大于背景图时设置背景图重复的方向 |
| 背景图充满 | 复选框 | false | 是否让背景图充满整个容器 |
| 溢出 | 下拉 | 自动滚动栏 | 内容尺寸超出容器时，是否要出滚动条 |
| 悬停阴影 | 复选框 | false | 鼠标悬停时是否显示边框阴影 |
| 表头背景色 | 颜色选择器 | - | 设置表格头部背景色 |
# 3 详细属性介绍
## 3.1 值域属性
值域是一个字段录入或者显示值的部分，如图：红框范围的是整个字段的范围，蓝框橙色背景部分的是值域的范围。如果有设置值域部分的样式属性，值域的样式属性会覆盖字段的样式属性。
举个例子：如果设置了字体大小为14，值域的字体大小为18。那么字段标题部分显示的字体大小为14，值部分显示的字体大小为18。前景色，背景色这些同理。
## 3.2 溢出
溢出属性有三个，分别是自动滚动栏，可见，裁减。下面以一个Flex面板为例介绍下这三个属性，为了区分边界，给Flex面板加了一个浅色的背景色，Flex面板里面加了三个文本字段
自动滚动栏：顾名思义，就是元素内容超出容器大小时会出滚动条，如图，文本内容超出容器尺寸时出滚动条。
可见：溢出属性设置为可见时，内容超出不会出滚动条，但是会撑出容器，保持可见，如图：
裁减：溢出属性设置为裁减时，内容超出不会出滚动条，超出部分会被截断.
## 3.3 扩展比率和压缩比率
### 3.3.1 扩展比率
扩展比率用于设置一个控件在分配父级控件剩余空间时能分配到的空间比例（此处空间指：当父级控件为水平布局时，指宽度；当父级控件为垂直布局时，指高度），咋一听好像很难理解，没关系，下面我们直接图解：
拿图中第三个例子说明，B、C的扩展比率分别为1和2，剩余空间为600px，则B分得剩余空间为:
600 * (1 / (1 + 2)) = 200，加上自身基础宽度，则最终B的宽度为400px，同理得C的最终宽度为600px。
注：
① 如果你的父容器设置了垂直布局，那么此时分配的就会是父容器的剩余高度空间，分配对象为子容器的高度；
②扩展比率设置为0即表示该控件不被扩展，只维持自身宽度(高度)
③当父容器剩余空间小于等于0时，扩展比率不生效（因为没有空间可分了）
### 3.3.2 压缩比率
压缩比率用于设置一个控件在父级控件空间不足以放下所有子控件时，不足的部分由子控件们按照设置的压缩比例压缩各自的空间
拿图中第三个例子说明，B、C的压缩比率分别为1和3，父容器不足的空间为200px，则B应该压缩的空间为:
200 * (1 / (1+3)) = 50，自身基础宽度600px减去应该被压缩的宽度，则最终B的宽度为550px，同理得C的最终宽度为450px。
注：
① 如果你的父容器设置了垂直布局，那么此时需要压缩的空间大小就是父容器距离足以容纳子控件的高度所差的空间，压缩对象为子容器的高度。
②压缩比率设置为0即表示该控件不被压缩，维持自身宽度(高度)，即使本身宽度（高度）超出父容器也不会被压缩。
③当父容器的空间足以容纳所有子控件时，子控件上设置的压缩比率不生效，所有子控件维持自身宽度（高度）
## 3.4 自定义样式
当设计器上的样式不能满足需求或者想要设置控件更深层级的样式时，可以使用自定义样式。
自定义样式是原生css样式的写法，当前元素的className使用 "$" 代替，可以以此为基准找到对应元素的节点样式进行修改。自定义样式模板提供了几种修改样板，去掉注释即可使用
