按钮


按钮组件用于在仪表盘页面上放置一个可点击的操作入口,点击后可跳转到指定链接、发起请求,或触发与其他组件的数据联动。


../_images/button.gif


有关标题、背景、内边距和样式复制等通用配置,参见 图表通用配置。

按钮的数据


按钮可添加 1 个维度 字段。有关数据源和数据项的通用配置信息,参见 图表通用配置 > 配置数据。

  • 动作为 链接跳转 时,不需要添加数据项。

  • 动作为 组件联动 时,按钮以该维度字段的 第一条数据 作为联动值广播给其他组件。若第一条数据不是需要筛选的值,可 添加计算字段 固定返回值。例如联动目标需要 device_name = Device2,则添加一个返回值固定为 Device2 的计算字段。


../_images/calculated_data.png

按钮的样式

动作


动作 决定点击按钮后的行为,可选 链接跳转(默认)或 组件联动。

  • 链接跳转:点击后按 交互设置 中配置的方式跳转或发起请求。

  • 组件联动:点击后把按钮携带的维度值广播给页面上已配置联动关系的组件。选择该项后 交互设置 隐藏。

交互设置


仅在 动作 为 链接跳转 时显示。点击 交互设置 在弹窗中配置点击后的行为,各项的详细说明参见 图表通用配置 > 交互设置。

图标类型


图标类型 决定按钮图标的来源,默认 内置:

  • 内置:从 DTV 内置图标库中选择,随后可配置 图标、图标衬底 和 图标颜色。

  • 自定义:使用 自定义图标 上传或选择素材图片。选择该项后,图标、图标衬底 和 图标颜色 隐藏。

图标


仅在 图标类型 为 内置 时显示。从内置图标库中选择具体图标。

自定义图标


仅在 图标类型 为 自定义 时显示。上传或从素材库选择一张图片作为按钮图标。

图标衬底


仅在 图标类型 为 内置 时显示。勾选后在图标下方叠加一块半透明色块作为衬底,颜色取自 图标颜色。

图标颜色


仅在 图标类型 为 内置 时显示。设置图标颜色,支持纯色或渐变色。勾选 图标衬底 后,衬底也取用该颜色。

图标大小


设置图标的显示尺寸,默认 20。

图标位置


设置图标相对按钮文字的方向,可选 左侧(默认)或 右侧。

图标文字间距


设置图标与按钮文字之间的距离,默认 12。

按钮文字


填写按钮上显示的文本,支持按语言分别填写,便于多语言页面。

按钮字体


设置按钮文字的字体、字号、颜色和加粗、倾斜、下划线样式。

背景颜色


设置按钮的填充色,支持纯色或渐变色。勾选 基本 标签页的 背景色 为自动时,按钮按当前页面主题取默认底色。

边框颜色


设置按钮轮廓线的颜色,支持纯色或渐变色。

边框宽度


设置轮廓线的宽度,默认 2。设为 0 可隐藏边框。

圆角


设置按钮四角的圆弧程度,默认 2。增大数值可使按钮接近胶囊形状。

运行时交互


以下行为由组件在运行时提供,不需要配置:

  • 联动的开与关:动作为 组件联动 时,首次点击广播联动值,再次点击取消联动并恢复其他组件。处于联动状态时按钮外侧显示一圈光晕。

  • 悬浮提示:动作为 组件联动 时,未触发联动时提示「联动图表」,已触发时提示「已联动,再次点击可取消联动」;动作为 链接跳转 时,提示文字取 交互设置 中填写的交互显示名称。

  • 未配置跳转时的指针:动作为 链接跳转 但未配置有效跳转目标时,鼠标指针不显示为手型。


备注

切换预设样式时,动作、交互设置 和 按钮文字 会被保留,不随预设覆盖。