数字组件是在画布上展示一个数字的组件。

虽然数字组件也能展示数字之外的字符,但数字组件在卡片上有单独的字体,并且不支持粗体。推荐在数字组件中只展示数字字符。

105.png

一、添加组件

点击“组件”打开组件库列表,点击“数字”组件拖到画布区。
106.gif

二、调整组件位置

通用的调整组件位置方法,请参考文档:调整组件位置

三、调整组件大小

通用的调整组件大小方法,请参考文档:调整组件大小

四、通用

组件通用配置请参考文档:组件通用配置

五、文本内容

设置数字组件中显示的内容。可以设置为固定值,数字内容在下边文本框中输入。也可以设置关联数据,使用数据源为组件动态设置数字内容。
107.gif

六、文本样式

1. 颜色

  • 使用固定值的颜色时,数字的颜色固定不变。可以通过调色盘(下图左)中设置颜色和透明度,或者直接在颜色代码框(下图右)中直接输入颜色的六位十六进制代码值和透明度值。

108.png109.png

  • 使用关联数据的颜色时,文本颜色由数据源动态决定。数据源的数据可以是:
    • 颜色单词(例如:redbluewhite 等);
    • 六位或八位十六进制颜色码(例如:#FFFFFF#FFFFFFFF 等);
    • RGB/RGBA颜色值(例如:RGB(255,0,255)RGBA(255,0,255) 等)。

八位颜色码前两位为透明度,00为完全透明,FF为完全不透明。

110.gif

2. 字号

数字内容的字号默认是 20px,可以点击字号的下拉框,选择合适的字号。目前提供的字号为:18px、20px、24px、32px、36px 和 64px。
111.gif

当字号过大,使得数字大小超过组件的边界时,组件的边界不会随之扩大。

3. 行高

当一个组件中的文本内容在多行中显示时,可以设置 行高 属性来控制多行文本间的距离。默认是20,可设置的区间为 [0-64]。

可以拖动滑动条设置,也可以直接输入行高值。
112.gif

七、对齐方式

如果组件边界较大但数字较少,可以设置对齐方式来决定数字在组件中展示的位置。

对齐方式分为:

  • 水平 左对齐/水平居中/右对齐
  • 垂直 上对齐/垂直居中/下对齐

113.gif

八、交互

通用的交互配置请参考文档:组件交互