1. 概述
数据大屏支持用户添加默认组件、图表组件、场景组件,以及内容组件。默认组件和内容组件是丰富大屏的纯展现类元素,其中默认组件包含文本、矩形、图表、日期、实践、重复器、轮播器、标签页等基本组件。本文为您简单介绍默认组件的情况,操作较为复杂的组件将为您单独成文介绍。
2. 快速入门
(1)进入到大屏编辑区,从右侧组件区选择默认/内容组件;
(2)选择目标组件点击选择到画布区域,此处以标题为例;
(3)之后可以在画布中拖拽移动组件位置;
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_12ddf9cc4001c7a021b545eda228f7c3)
(4)在样式处修改字体颜色或字体位置是否加粗等属性。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_215ef0685f5ed12258a66bd7d60fb47b)
3. 默认组件介绍
功能名称 | 使用说明 | 样式配置 |
---|
标题、文本 | 用来在大屏中放置文字说明的组件。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_17d1f9463ffce09b24b0214e21970009) | 可以对文本的字体、粗细、文字大小、文本颜色、文本间距、文本相对该组件外部矩形框位置(左中右、上中下)进行调整。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_ea032a05c1637697d1c75b2484def026) |
矩形、圆 | 用来丰富大屏内容。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_83180d3b73fe328f544228d1dc188ead) | - 可以调整形状的背景颜色或者使用背景图。
- 可以变更边框颜色、描边粗细、圆角(仅矩形)、虚线描边和变化。
- 可以通过选择模糊类型与模糊值增加模糊效果。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_4a077f51dcb0bd15289913b32f42f264.png)
|
图片、视频 | 放置已经制作好的图片或视频。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_6749e75f54b0401de2afbe8c55a3f636) | - 图片点击即可上传本地图片。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_7e7426fcd16edd92eba739129ee2fc39) - 视频需要选择上传后的在线视频。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_c25fc7ee984efd3d5631da4365e54b8e)
|
网页、热区 | | 样式区都是直接填写URL。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_3e932bb6e4a729bbf26a3a837b30aa50) |
日期时间、日期、时间、星期 | 显示当前时间的组件,只是现实内容会有差异。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_7cb9a2d43d13dd68970ef31fb4e0b00c) | - 在样式上可以对文字的字体、粗细、文字大小、文本颜色、文本间距、文本相对该组件外部矩形框位置(左中右、上中下)进行调整。
- 可以对显示时间的分隔符、格式做调整。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_6eaeb51eb10dd5421d88572809fc49ba)
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_aeb0249a47f99edf25bf7af99930b226)
|
重复器 | - 重复器是一个复杂交互面板,点击之后有一个矩形区域,需要将组件双击,进入一个新面板之后使用。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_6499a20cdd6b755f335debae20d6ffee)
- 进入面板之后可以设置新面板中需要重复的内容,内容可以是任何组件。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_8c7f29009c5646f1041a120907699533)
| - 在样式上,可以设置布局的重复方向是行还是列,是否超出折行,以及行内个数。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_0044f6fdd7a45f105d3e88d3efa13e28)
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_0a47cabb054ee43f04a662e72166632e) - 可以设置是否分页显示。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_62ccb746c9abc15758bd87fba5c4580e) - 可以设置是否多页自动轮播以及自动轮播时长(预览生效)。
|
轮播器 | | - 轮播方式可以切换不同效果,也可以设置自动播放时长。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_1ca3a9f679059537a8b72cf35284a475) - 可以设置是否有指示点,去做不同页面之间的切换。
- 可以设置指示点的尺寸、间距。
- 当前节点与其他节点的填充颜色、描边尺寸以及描边大小。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_7e92ded593e51486e31dd92d8fa21432)
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_63c208aee5bb165aa79adbbfe60a5bf3)
|
标签页 | ![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_1ddd49176690ba5f938f49a9ebe0f73b)
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_368926f894cc338f2896b5ae82e85858)
| - 标签上可以设置是否自动轮播与轮播时间,勾选会自动播放不同tab之间的内容,否则需要手动点击才会更改不同tab内容。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_c4f71d8c1916b75cbec086a658d550e3) - tab头部可以选择是否显示。
- 建议选择不显示tab头部的时候,开启上述的自动轮播。
![](https://lf6-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_f77c5c3992e561c4dc408a9f3dc8e3a2)
- 勾选tab头部选项之后,可以调整Tab头部高度,选中/未选中tab块的背景色,选中/未选中文本的字体、粗细、文字大小、文本颜色、文本相对位置(左中右、上中下)进行调整。
![](https://lf3-volc-editor.volccdn.com/obj/volcfe/sop-public/upload_cafd02503f7e8a71f457a7d5720acbc0)
|
下拉选择器 | 下拉选择器支持用户从多个选项中选择一项或几项;仅支持用户在下拉选项中选择和搜索系统提供的选项,不支持输入。用户可以在底部查询窗口中选择字段进行配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_64b4eec01626247656bdb6ee46c4c0a6.png) | - 在样式上可以对选中值和弹出菜单文字的字体、粗细、文字大小、文本颜色、文本间距、文本相对该组件外部矩形框位置(左中右、上中下)进行调整。
- 可以对选项框和弹出菜单框的颜色、位置等进行配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_3346022e89d9a564f655a7797467d1ee.jpg)
|
树状下拉选择器 | ![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_e062f7d27abb559d8675dd75872d7abd.png)
| - 在样式上可以对选中值和弹出菜单文字的字体、粗细、文字大小、文本颜色、文本间距、文本相对该组件外部矩形框位置(左中右、上中下)进行调整。
- 可以对选项框和弹出菜单框的颜色、位置等进行配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_2693c9b9d8aa84a23c9cfc0ecbacb052.png)
|
日期选择器 | ![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_e045ba078f20afbcea5d26d4130026ba.png)
| - 可以对日期文本框的字体、粗细、文字大小、文字位置以及日期文字和提示信息的颜色进行调整。
- 可以对日期选项框的字体、粗细、文字大小、文本颜色、文本间距、文本相对该组件外部矩形框位置(左中右、上中下)进行调整。
- 可以对默认日期和不可用日期的字体、粗细、文字大小和文字颜色进行配置。
- 可以对选中日期的字体、粗细、文字大小、文字颜色等进行配置。
- 可以对预览日期和日期菜单的颜色进行配置。
![alt](https://portal.volccdn.com/obj/volcfe/cloud-universal-doc/upload_b8c75e33b46f4dc78745ada120436829.png)
|