控件
1.概述
本文将依次介绍每个控件类组件的配置方式。
2.详细说明
文字
文字组件的入口如下图所示。
可以直接修改静态JSON来设置要展示的文字内容。
也可以通过API或者数据模型，拖入一个文本字段来展示。
可以在样式面板修改文字的样式。
滚动文字
滚动文字的入口如下图所示。
滚动文字的设置项同文字组件基本类似。在文字组件的基础上，滚动文字支持设置文字的横向滚动效果。通常适合循环轮播显示一段较长的文字内容过。
多行文本
多行文本组件的入口如下图所示。
相比于文字组件，多行文本适合于展示较长的文字段落，可直接在“样式——>文字——>文字内容”编辑数据。
同时，多行文本还支持设置纵向的文字滚动轮播。
滤镜
滤镜组件如下图所示。
滤镜组件在编辑页展示为一个透明的矩形框，通过叠加在别的组件上实现滤镜遮罩的效果。
以黑白滤镜为例，其在图片组件上的覆盖效果对比如下图所示。
滤镜的样式设置包括：亮度、对比度、饱和度、复古、灰度、反相、色相和模糊。
滤镜组件支持的交互能力配置包括：入场动画、写入参数和响应事件配置。
选项卡
选项卡的入口如下图所示。
可以直接修改静态JSON数据来调整选项卡的数据项。
也可以通过API或者数据模型，接入一个维度字段，读取数据项展示。
可以在样式面板中自定义选项卡样式。
图片
图片组件的入口如下图所示。
可以在静态数据中设置图片的URL地址。
也可以通过API或者数据模型，拖入一个含有图片URL地址的字段。 或者直接上传本地的图片文件。
轮播图
轮播图组件的入口如下图所示。
可以上传多张图片，并设置自动轮播。
热区
热区组件如下图所示。
热区组件是一个透明矩形框，一般覆盖在其他没有交互能力的组件上，为热区矩形范围内增加交互行为。
热区可配置的交互能力包括：图表联动、参数写入、入场动画和响应事件。
写入参数的触发时机除了点击组件外，还有鼠标移入或移除热区区域。
注释框
注释框组件如下图所示。
注释框在大屏展示中起到信息提示作用，作用效果如下：光标hover显示提示信息。
注释框文本可以通过静态JSON直接编辑。
也可以通过连接API或数据模型导入注释文本。
注释框的图形样式配置包括：
- 图标样式：实现提示icon的样式调整，包括类型、颜色、尺寸、位置和边框样式。
- 注释框样式：配置hover显示的文本框样式，包括上间距、背景颜色和圆角程度。
- 注释文本：配置注释文本的显示样式，包括文字样式、大小、颜色、对齐、是否缩进、行间距及列表样式。
注释框支持的交互配置包括入场动画和响应事件的配置。
日期时间
日期时间组件如下图所示。
日期时间组件显示当前日期和时间，可以在样式面板中自定义显示格式，如：YYYY-MM-DD
天气
天气组件如下图所示。
可以在样式面板中设定天气组件修改显示格式。
可以在数据面板中通过设定city值来修改对应城市天气。
轮播组
轮播组组件如下图所示。
与轮播图组件功能相同，用于展示多个图片，区别是展示形式有所区别。
- 轮播图：一次只展示一张图片，切换器在下方。
- 轮播组：一次可展示多张图片，切换器在两侧。
可以在数据配置区域配置待展示的图片URL。可以通过直接修改静态JSON，也可以通过接入API或数据模型的方式写入图片URL。
也可以在样式配置区域从本地上传图片。从样式配置区上传的图片展示优先级高于数据配置区写入的图片，因此如果样式区传入了图片，轮播组将展示上传图片而非数据区写入的图片。
轮播组的样式配置包括：
- 展示区配置：调整展示区尺寸、一次展示的图片个数、图片间距和不透明度。
- 切换器配置：调整背景样式及颜色，切换器button样式、粗细和颜色，是否展示缩略图。
- 动画效果配置：调整轮播动画效果，包括动画类型、轮播动画持续时间、停留时长。
轮播组支持的交互配置包括入场动画和响应事件。
全屏切换
全屏切换如下图所示。
全屏切换常用于对大屏展示状态的切换。阅览大屏时，点击即可进入全屏状态，再次点击，退出全屏状态。
图形样式的设置支持更改按钮样式，如下图所示，可以通过上传图片实现全屏和退出按钮的样式自定义。
全屏切换的交互事件配置支持：入场动画和响应事件。
开关
开关如下图所示。
开关用于联动控制其他组件。例如，利用开关控制图表的显示或隐藏状态。
可以在图形样式配置区域修改开关颜色，如下图所示。
开关目前支持的交互事件包括：入场动画、参数写入、以及响应事件配置。
开关组件的交互参数配置过程与其他组件有些许不同。开关组件在传递参数值时，不再需要选择字段，通过开关状态自动传入true或false，数据类型为布尔型。以下图为例，开关组件的传参逻辑为：当开关状态切换为”开启“时，”将true写入参数test“的动作被触发；当开关状态切换为”开启“时，”将false写入参数test“的动作被触发。
事件时间轴
事件时间轴的入口如下图所示。
事件时间轴往往被用来轮播呈现大事记。
相关的数据配置如下图所示。
- 时间标题：大事节点的日期。
- 描述文字：大事节点的相关描述。
数据可来自静态JSON、API或数据模型。
事件时间轴可配置的图形样式如下图所示：
- 布局：设置时间轴的方向和节点分布。
- 轴线样式：设置轴线的线型、粗细和颜色。
- 点样式：设置选中以及未选中的节点形状和尺寸。
- 时间标题样式：设置时间标题的样式。
- 描述文字样式：设置描述文字的样式。
- 动效：设置组件的轮播效果，包括：是否轮播、轮播间隔、动画时长、是否联动。
事件时间轴的交互事件配置支持：联动、入场动画、写入参数、响应事件。
下拉单选
下拉单选组件的入口如下图所示。
下拉单选组件的图形样式设置包括：
- 选择框：配置下拉框未展开时，选择框的样式，包括边框、背景、文字内容及样式。
- 下拉框：配置下拉框的边框、背景和字体样式。
数据可来自静态JSON、API或数据模型。
下拉多选
下拉多选组件的入口如下图所示。
相比下拉单选组件，下拉多选提供多选项同时选择，增加额外按钮设置，可添加清空，全选按钮。
时间选择器
时间选择器组件的入口如下图所示。
和下拉单选类似，时间选择器可以选择日期，在样式面板中可以在选择形式中修改粒度。
范围选择器
范围选择器组件的入口如下图所示。
与时间选择器类似，范围选择器可以选择日期时间段，如：2023-01-01 ~ 2023-02-02
树形选择器
树形选择器组件如下图所示。
树形选择器常用于选项间存在层级关系的场景，通过将选项分组展示，提高选项展示的清晰与美观程度。
可以在静态JSON区域直接写入选项。
也可以通过连接API或数据模型实现数据写入。
选中字段并将其拖入层级区域，字段中的值将按拖入顺序实现层级嵌套。以下图“地区-省份”为例，地区为一级字段，省份为二级字段。
树形选择器的图形样式设置包括：
- 选择框：配置下拉框未展开时，选择框的样式，包括边框、背景、文字内容及样式。
- 下拉框：配置下拉框的边框、背景和字体样式。
矩形卡片
矩形卡片的入口如下图所示。
矩形卡片通常可以作为一些图表的背景装饰。在样式面板，可以设置矩形卡片的标题、背景、边框、圆角等样式。
线条
线条的入口如下图所示。
线条组件常用于装饰大屏。
可为线条组件配置线条样式，包括线条的粗细、线型、颜色以及端点形状。
线条的交互事件配置支持：入场动画和响应事件。
视频
视频组件如下图所示。
视频组件用于在大屏中实现视频播放。
可以在数据配置区写入URL完成视频插入，如下图所示。可以直接修改静态jSON，也可以通过接入API或数据模型实现数据写入。需要注意，视频组件只能读入一个字段的一个数值，多余数据将不生效。
也可以从视频样式配置区域进入，在“上传视频”区域选择本地视频导入。
视频的样式配置包括视频配置和滤镜配置：
- 视频配置：支持视频及封面上传、显示设置和播放设置。
- 滤镜配置：包括高斯模糊、亮度。对比度、灰度、色相、饱和度和褐色调整。
视频组件支持的交互能力包括入场动画和响应事件设置。
视频流
视频流组件的入口如下图所示。
视频流组件的典型应用场景，是接入监控摄像头拍摄到的实时视频流。支持HTTP-FLV，HLS，MP4，webm四种协议。
网页iframe
网页iframe组件的入口如下图所示。
可以在大屏中嵌入一个网页。
网页轮播
网页轮播组件如下图所示。
网页轮播组件功能一般用于需要展示多个网页的情况，较于网页iframe组件，网页轮播组件多了轮播能力。
网页轮播通过识别URL来实现网页的识别与展示。可以通过直接修改静态JSON或连接API或数据模型的方式实现数据更改。数据格式上，仅支持拖入一个有多值的字符串字段。
可以在样式配置区域对轮播效果进行配置。轮播设置内容如下图所示，可以改变轮播的时间间隔、切换速度、转场动画、以及切换器的显示。
网页轮播目前支持入场动画和响应事件的交互配置，如下图所示。
倒计时
倒计时组件如下图所示。
可以在样式面板中设置文字样式，背景，标签。
倒计时组件数据可来自静态JSON、API或数据模型，下方为静态JSON，数据为日期格式：YYYY-MM-DD hh:mm:ss。
