网页组件-数字卡片

概述

数字卡片是网页组件的一种，可以同时展示数值与文本。
该组件在编辑器中的位置如下图所示：

添加方式

从组件工具栏将数字卡片组件拖拽到编辑器面板。

属性配置

尺寸：包括组件的宽度和高度，单位为像素。

• 可以输入数值自定义大小。
  
• 也可以通过拖拽的方式改变组件的宽高。
  

数字卡片组件有三种样式可以选择。

外观
主题：可以设置组件的主题颜色，当前有5种主题色可以选择。

组件名称：可以对当前组件命名。

排列布局：选择数字和标题的排列方式，包括左右和上下。

文字排列：选择文字排列方式。

背景色：组件的背景颜色。

• 在颜色调色板中选择颜色和透明度。
  
• 手动输入RGB、HSL、Hex数值，改变颜色。
  

边框颜色：边框颜色：组件边框的颜色。

• 在颜色调色板中选择颜色和透明度。
  
• 手动输入RGB、HSL、Hex数值，改变颜色。
  

可设置组件的边框类型，包括实线、虚线、无边框。
手动输入数值或点击（ ）按键，改变边框粗细。

标题
文本：在此处输入标题文本。

字体：可选择字体样式。

字号：文字的大小。

字重：设置文字粗细。

颜色：文字的颜色。

• 在颜色调色板中选择颜色和透明度。
  
• 手动输入RGB、HSL、Hex数值，改变颜色。
  

数值
字体：可选择字体样式。

字号：文字的大小。

字重：设置文字粗细。

颜色：文字的颜色。

• 在颜色调色板中选择颜色和透明度。
  
• 手动输入RGB、HSL、Hex数值，改变颜色。
  

千位分隔：勾选显示千位分隔，取消勾选则不显示。

分隔符：可自定义输入分隔符。

小数精度：小数点精确的度，可选择小数精度。

数值缩写：可选择数值缩写样式。

四舍五入：勾选可以设置四舍五入。

后缀
文本：在此处输入文本。

字体：可选择字体样式。

字号：文字的大小。

字重：设置文字粗细。

颜色：文字的颜色。

• 在颜色调色板中选择颜色和透明度。
  
• 手动输入RGB、HSL、Hex数值，改变颜色。
  

重置主题样式：一键还原为组件初始化的样式。

数据源连接

在进行数字卡片组件数据源配置时，可为数字卡片增加判断条件，实现不同判断结果时展示不同内容。支持设置自定义数据和无数据显示。