文本、跑马灯

更新时间:2020-02-10

文本内容设置

这里除了可以配置显示文本的内容,还可以设置文字的字体,大小,颜色等与文字风格有关的配置:

图片

如果开启了文字滚动(即「跑马灯」效果),则还可以配置文字滚动的速度,以及每轮滚动后暂停的时间:

图片

如果开启了「超链接」功能,则还可以配置超链接的地址以及一些效果:

图片

文本内容和其它组件的联动

其它组件在交互的时候,可以反应到文本的内容中,Sugar中文本组件的内容支持多种嵌入语法,下面逐一介绍:

文本中嵌入过滤条件

图片

当更改上图中的单选条件的取值,文本的内容也会跟随变动。文本中嵌入过滤条件的语法是:{conditions.key},其中key是指过滤条件的「查询 key 值」。

文本中嵌入联动参数

首先我们如下图设置一个饼图联动右侧的一个文本组件:

图片

然后我们在文本组件的内容中就可以嵌入联动参数,此时如果我们点击饼图的「PC」这一部分时,即可达到如下:

图片

文本中嵌入联动参数的语法是:

  • {dependence}
  • {dependence || defaultValue}
  • {dependence.key}
  • {dependence.key || defaultValue}

其中key是联动参数 item 中某字段名称,如果不写key即取默认的联动参数(大部分情况下是不需要写key字段的),defaultValue是当联动未触发,或联动参数不存在时显示的默认值。这块的语法类似SQL 中硬嵌入联动参数

文本中嵌入 URL 参数

文本中支持嵌入当前 url 中的参数,如下图:

图片

文本中嵌入 URL 参数的语法是:

  • {querys.key}
  • {querys.key || defaultValue}

其中key是 URL 中参数的名称,defaultValue是当 URL 中没有该参数时,显示的默认值。这块的语法类似SQL 中嵌入 URL 参数

动态拉取文本内容

文本的内容还支持动态的方式拉取:

图片

本页内容