样式的配置分为通用配置和个性化配置,不同组件的个性化配置项不同。
一、样式配置项
1、下图为大部分组件的通用配置,每个组件特殊的配置详见组件介绍部分
填充配置介绍:
配置填充方式:可选择单色、渐变色或背景图
1)单色
直接输入颜色或在取色器上选取合适的颜色。
2)渐变色
3)背景图
2、通用配置数据详解见下表:
配置 | 配置项 | 说明 | 数据格式 | 默认值 | 可选项 |
位置大小基础配置 | X坐标 | 左上角x值 | number | ||
Y坐标 | 左上角y值 | number | |||
W宽度 | 宽度 | number | 150 | ||
H高度 | 高度 | number | 150 | ||
旋转角度 | 绕中心旋转角度 | number | 0 | 0-360 | |
左右镜像 | 左右方向翻转 | boolean | false | true, false | |
上下镜像 | 上下方向翻转 | boolean | false | true, false | |
基本样式 | 组件名称 | 名称 | string | 组件类型-随机值 | |
组件锁定 | 是否可编辑 | boolean | true | true, false | |
组件可见 | 是否可见 | number | true | true, false | |
不透明度 | 不透明度 | number | 1 | 0-1 | |
填充 | 背景颜色 | 背景颜色 | string | '#FF8700' | |
渐进色 | 渐变颜色 | string | '#FFFFFF' | ||
渐变类型 | 渐变类型 | string | "" | 'linear.east' 'linear.south' 'linear.northeast' 'linear.southeast' 'radial' | |
背景图片 | 形状类、图片组件的背景图片 | string | |||
拉伸 | 沿着某个方向拉伸的方式 | string | 'ratio' | 'ratio' 'fill' | |
边框 | 圆角 | 圆角 | number | mixed/同一值 | |
圆角左上 | 左上圆角半径 | number | |||
圆角右上 | 右上圆角半径 | number | |||
圆角右下 | 右下圆角半径 | number | |||
圆角左下 | 左下圆角半径 | number | |||
宽度 | 宽度 | number | 1 | ||
颜色 | 颜色 | string | '#FF8700' | ||
样式 | 边框线的样式 | number | 'line' | ||
线交汇 | 线交汇处样式 | string | 'round' | 'round' 'bevel' 'miter' | |
线帽 | 线帽 | number | 'round' | 'butt' 'round' 'square' | |
布局 | 横缩放 | 横向缩放倍数 | number | 1 | min:0, max:150, step:0.1, |
纵缩放 | 纵向缩放倍数 | number | 1 | min:0, max:150, step:0.1, | |
阴影 | 横偏移 | 横偏移 | number | 1 | min: -100, max:100, step:1, |
纵偏移 | 纵偏移 | number | 1 | min: -100, max:100, step:1, | |
模糊 | 模糊 | number | 0 | min: -100, max:100, step:1, | |
颜色 | 阴影颜色 | number | '#FFFFFF' |
二、样式的批量修改和复用
支持在右侧面板批量编辑样式、通过选中组件后右键菜单复制粘贴组件样式。
1、批量编辑样式(多选后可在右侧批量修改)
2、样式复用
1)在原组件右键菜单处选择复制组件样式
2)在目标组件右键菜单处选择粘贴组件样式