组件样式属性

  • 文档创建者:yzm164890
  • 历史版本:4
  • 最近更新:Naya 于 2025-04-08
  • 1. 概述

    1.1 应用场景

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

    1.2 功能介绍

    本文将详细介绍主题样式、组件样式、组件属性等设置项。如下图所示:

    组件样式属性.png

    2. 模板样式

    2.1 切换主题样式

    支持对仪表板整体样式风格进行设置,能够统一仪表板内所有组件的样式 。

    点击「主题样式」tab,产品中内置了多种主题样式,选择某一样式后,点击「切换」,即可一键调整仪表板样式风格。如下图所示:

    Group 1.png

    2.2 主题配色

    1)每个主题样式拥有一套主题配色,当选定某一主题后,若需要对组件内的背景颜色等进行调整,可从主题配色中选取颜色,能够保证看板整体色彩风格的一致性,使看板呈现出较为和谐的视觉效果。

    以「冷静蓝灰」主题为例,在调整页面背景使,主题配色如下图所示:

    Group 31.png

    2)建议在修改「其他」组件配色时,优先从主题配色中选取颜色。切换主题样式后,主题配色会相应变化,快速适配看板的整体风格。

    详情参见文档:主题配色

    2.3 组件字号设置

    1)在「模板样式>其他设置」中,支持统一调整标题、图表、表格以及控件字号。如下图所示:

    Group 2.png

    2)以图表和表格为例,调整前后的对比如下图所示:

    Group 3.png

    3. 组件样式

    3.1 边框背景

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

    注:设置组件边框背景仅对选中的组件生效,不影响其他组件。

    Group 112.png

    3.1.1 颜色

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

    Group 108.png

    3.1.2 自定义上传

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

    Group 109.png

    2)上传后,选中图片后,可设置「点九图填充」。如下图所示:

    Group 110.png

    3)选择图片后,同样支持设置填充方式、色相和不透明度。如下图所示:

    Group 111.png

    3.2 边框线

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

    Group 113.png

    3.3 圆角半径

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

    Group 163.png

    2)示例效果如下所示:

    示例
    效果

    效果一:将圆角半径整体设置为 20px

    效果二:将圆角半径单个设置,左上及右下圆角半径设置为 40px,其余圆角设置为 0px

    效果三:将圆角半径整体设置为 50%

    3.4 毛玻璃

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

    • 未开启毛玻璃效果

    Group 115.png

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

    Group 116.png

    3.5 倒影

    1)勾选「开启倒影效果」,可丰富文字、边框、图标等场景效果。

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

    Group 117.png

    2)效果如下图所示:

    3.6 阴影

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

    配置项
    说明
    阴影名称可自定义,不支持重名。
    阴影样式

    可选择为「外阴影」或「内阴影」。

    注:图片组件设置「内阴影」时,可能会被组件本身的内容覆盖,而导致看起来无阴影效果。

    偏移

    可设置 X 和 Y 方向的偏移。

    模糊度可设置阴影的模糊度
    范围可设置阴影的范围
    颜色可设置阴影的颜色

    Group 118.png

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

    ScreenRecorderProject20.gif

    4. 组件属性

    4.1 名称

    支持自定义修改组件名称。

    • 在仪表板中拖入图表时,组件名称默认与图表标题保持一致。若在此处修改组件名称,那么修改后的组件名称将不再与图表标题保持一致。

    • 组件(除图表)新建时,默认会赋予一个初始名称,初始名称的规则为「图表名称+页面名称+n」,如「图表1_页面1」

    • 同一页面下,组件不可重名。同一画布不同页面下,组件支持同名。

    Group 121.png

    4.2 大小

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

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

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

    Group 122.png

    4.3 位置

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

    Group 123.png

    4.4 内边距

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

    Group 164.png

    4.5 3D旋转

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

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

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

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

    Group 125.png

    4.6 不透明度

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

    ScreenRecorderProject26.gif

    附件列表


    主题: 仪表板2.0
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    9s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持

    反馈已提交

    网络繁忙