编辑模板

属性

点击任意模板或者任意节点后，在最右侧区域会显示属性编辑区，其中只有模板【名称】可编辑，其他的属性均为只读

样式

布局样式

模板中支持两种布局方式，默认布局（flexbox）和绝对布局（absolute）

默认布局

布局基于Flexbox模型，同时IDE也支持这些布局样式的可视化编辑，具体Flexbox布局模型可参考MDN文档

1. 排列方向支持默认：【横向】（flex-directoin : row）
   • 【横向】（flex-directoin : row）
     
   • 【反向横向】（flex-directoin : row-reverse）
     
   • 【纵向】（flex-directoin : column）
     
   • 【反向纵向】（flex-direction : column-reverse）
     
2. 水平对齐默认：【横向】时：justify-content : flex-start；【纵向】时：align-items : stretch
   • 无论排列方向是【横向】还是【纵向】，水平对齐指的都是横向方向的布局方式
     • 【横向】时：justify-content : flex-start; 【纵向】时：align-items : flex-start;
       
     • 【横向】时：justify-content : center; 【纵向】时：align-items : center;
       
     • 【横向】时：justify-content : flex-end; 【纵向】时：align-items : flex-end;
       
     • 【横向】时：justify-content : space-between; 【纵向】时：align-items : space-between;
       
     • 【横向】时：justify-content : space-around; 【纵向】时：align-items : space-around;
       
3. 垂直对齐默认：【横向】时：align-items : flex-start；【纵向】时：justify-content : stretch
   • 无论排列方向是【横向】还是【纵向】，水平对齐指的都是纵向方向的布局方式
     • 【横向】时：align-items : flex-start; 【纵向】时：justify-content : flex-start;
       
     • 【横向】时：align-items : center; 【纵向】时：justify-content : center;
       
     • 【横向】时：align-items : flex-end; 【纵向】时：justify-content : flex-end;
       
     • 【横向】时：align-items : space-between; 【纵向】时：justify-content : space-between;
       
     • 【横向】时：align-items : space-around; 【纵向】时：justify-content : space-around;
       
4. 撑满剩余空间
   默认：不撑满（flex-grow : 0）
   父节点设置的是【横向】时，开关打开是指的横向方向上当前节点拉伸撑满剩余空间，此时：flex-grow : 1
   父节点设置的是【纵向】时，开关打开是指的纵向方向上当前节点拉伸撑满剩余空间，此时：flex-grow : 1

5. 空间不足时压缩节点
   默认：压缩（flex-shrink : 1）
   父节点设置的是【横向】时，开关打开是指的横向方向上当前节点的空间无法满足正常布局时不压缩节点，此时：flex-shrink : 1
   父节点设置的是【纵向】时，开关打开是指的纵向方向上当前节点的空间无法满足正常布局时不压缩节点，此时：flex-shrink : 1

   绝对布局

   当选择绝对布局时，将设置position : absolute;
   直接通过top、left、right、bottom来确定当前节点的位置，脱离于父节点的布局方式

6. 上（top）：当前节点顶部距离父节点顶部的距离

7. 右（right）：当前节点右边距离父节点右边的距离
8. 下（bottom）：当前节点底部距离父节点底部的距离

9. 左（left）：当前节点左边距离父节点左边的距离

   其他布局

10. 宽度：width，单位：px、pt、%

11. 高度：height，单位：px、pt、%
12. 最小宽度：min-width，单位：px、pt、%
13. 最大宽度：max-width，单位：px、pt、%
14. 最小高度：min-height，单位：px、pt、%
15. 最大高度：max-height，单位：px、pt、%
16. 内边距：padding，单位：px、pt
17. 外边距：margin，单位：px、pt（当布局方式绝对布局时，不支持外边距的设置）
18. 宽高比：aspect-ratio

    其他样式

    字体

    默认系统字体

    字重

    默认常规体（Regular）

    文本颜色

    支持纯色和线性渐变色

    对于Text类型的节点来说，背景不支持线性渐变，文本颜色支持线性渐变

自适应

默认false，只适用于Text类型的节点
当设置为true时，节点的尺寸将随着数据的变化而变化

当自适应设置为true，且也设置了width时，默认width的含义为最大值

溢出裁剪

默认溢出裁剪开关打开，即当子节点的视图超出父节点的范围时，截断当前超出的部分，overflow：hidden，开关关闭时：overflow : visible

不透明度

默认1，opacity：1

圆角

规则圆角

默认0，border-radius：0

不规则圆角

可以针对上下左右四个角分别做不同的设置
border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius

填充

默认无填充；

纯色

background-color，颜色格式支持#RRGGBB、#RRGGBBAA、rgb（）、rgba（）四种格式

渐变色（线性渐变）

background-image，渐变色只支持线性渐变

边框

默认无边框；

普通边框

线性渐变边框

阴影

默认无阴影,box-shadow
支持设置 X：x偏移量；Y：y偏移量；阴影模糊半径；阴影扩展半径；阴影颜色