配置样式

样式的配置分为通用配置和个性化配置,不同组件的个性化配置项不同。

一、样式配置项

1、下图为大部分组件的通用配置,每个组件特殊的配置详见组件介绍部分

image.png

填充配置介绍:

配置填充方式:可选择单色、渐变色或背景图

image.png

1)单色

直接输入颜色或在取色器上选取合适的颜色。

image.png

2)渐变色

image.png

3)背景图

image.png

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、批量编辑样式(多选后可在右侧批量修改)

image.png

2、样式复用

1)在原组件右键菜单处选择复制组件样式

2)在目标组件右键菜单处选择粘贴组件样式

image.png