组件外观

1.1 应用场景

通过设置组件外观，可以提升仪表板的美观度、增强数据展示的直观性和整洁性。

1.2 功能介绍

本文将详细介绍组件样式、位置布局、视觉效果等设置项。如下图所示：

2.1 背景

选中一个组件，点击右侧配置栏的「组件」，设置组件背景，可设置为颜色、自定义上传。如下图所示：

注：设置组件背景仅对选中的组件生效，不影响其他组件。

2.1.1 颜色

选择边框背景为「颜色」方式时，可以点击色块选择颜色，也可手动输入色值，调整不透明度。如下图所示：

3.1.2 自定义上传

1）选择「自定义上传」方式后，点击「选择」，点击「+上传图片」，即可选择本地图片文件并上传。如下图所示：

2）选中图片后，可设置「点九图」。如下图所示：

3）填充方式可选择「普通填充」或者「点九图填充」，如下图所示：

4）选择图片后，可以设置填充方式、色相和不透明度。如下图所示：

2.2 边框线

组件边框线支持设置为「无、实线、点线、虚线」四种类型。选择线型后，支持设置线的粗细和颜色。如下图所示：

2.3 边框圆角

1）「圆角半径」支持对「整体」或「单个」圆角进行设置。如下图所示：

2）示例效果如下所示：

示例	效果
效果一：将圆角半径整体设置为 20px 效果二：将圆角半径单个设置，左上及右下圆角半径设置为 40px，其余圆角设置为 0px 效果三：将圆角半径整体设置为 50%

3.1 位置

组件位置，指的是组件左上角与页面左上角的横纵距离值。如下图所示：

3.2 大小

组件的宽高设置，单位为px。

• 组件尺寸的修改有两种方法：可在配置栏输入指定数值，也可在画布中手动拖拉调整尺寸。

• 设置组件尺寸时，可在配置栏锁定组件宽高比，防止组件变形。

3.3 内边距

组件内边距，是指组件边框和组件内容之间的留白。可设置组件的上下左右内边距，如下图所示：

4.1 不透明度

组件整体的不透明度，设置范围为0～100。默认为100。如下图所示：

4.2 毛玻璃

为突出内容，弱化背景，可开启上层组件的毛玻璃效果。勾选「毛玻璃效果」后，组件背景呈现一种毛玻璃效果。可自定义模糊度。

• 未开启毛玻璃效果：

• 开启毛玻璃效果，且模糊度为10：
  

4.3 倒影

1）勾选「开启倒影效果」，可丰富文字、边框、图标等场景效果，效果如下图所示：

注：暂不支持修改倒影效果距离、不透明度调整；素材叠加时部分投影可能会出现错位问题。

4.4 阴影

1）勾选「开启阴影效果」，可增加组件立体效果。支持添加多个阴影，点击「添加阴影」，弹出阴影设置框。设置项如下：

2）有多个阴影时，列表下方的阴影显示在最外层。可通过鼠标拖拽移动阴影顺序。如下图所示：

4.5 3D旋转

• 可以分别设置 x，y，z 轴方向上的旋转角度。角度调整范围为 0～360。

• 可以设置组件的透视距离，设置范围为正值。

• 如果是单个组件设置 3D旋转，对应的旋转中心为该组件中心。

• 如果是组合的组件设置 3D旋转，对应的旋转中心为该组合的中心。