iVX 开发 - 入门UI 组件介绍及实操详解

Posted 敬 之

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iVX 开发 - 入门UI 组件介绍及实操详解相关的知识,希望对你有一定的参考价值。


本文导读


写在前面

学习电梯一键直达:人人都可快速掌握的可视化编程语言。

往期系列文章:

  1. 认识 iVX
  2. 为什么要做 iVX(iVX 企业文化)
  3. iVX 开发 - 入门【一】开发环境、应用对象树介绍

iVX 各 UI 组件及属性面板详解

UI 组件位于 iVX 编辑器的左侧的组件栏中;


当我们将鼠标悬停至某一个组件时,会出现提示框,展示该组件的属性、动作以及事件;


如果想要详细了解该组件的使用方法,点击提示框右上角的 “查看详情” 即可直接跳转至该组件对应的文档中心。

1. 图片组件

图片组件用于在当前页面中插入图片,可支持 jpg 、jpeg 、png 、gif 格式。鼠标点击图片组件后会弹出图片选择框,然后选择图片进行上传;


上传后默认显示为该图片的原始宽高。点击图片选中,可以在左侧属性栏设置它的宽高等各项属以及排版、旋转、边框圆角、阴影、滤镜等效果。


此外还有自定义样式,即可以自己编写的 CSS 样式。选中图片,点击自定义样式后面的 “+”为图片添加自定义样式。如下操作,初始图片边框为黑色,然后添加自定义样式<当鼠标悬停时,边框颜色变为红色>;


效果如下:

想要替换图片,双击此图片即可弹出图片选择框;也可以通过属性“素材资源地址”,直接上传在线图片,如下我们在复制百度的一张图片地址,粘贴至素材资源地址,即可切换。

2. 图片序列组件

图片序列组件用于展示一组有序排列的图片,依序播放。任意时间内仅展示一张图片,经过若干时间间隔后移除该图片,展示下一张或上一张图片。如果图片前后相接则将形成近似于动画、视频的效果。

点击图片序列组件,可以看到提示我们上传多图或者是 Gif 动图;


我们上传一张 GIF 动态图,选中图片后点击图片列表,就可以看到 GIF 动图的所有切割图。接下来可以调整某一切割图的时长进而控制整个动图播放。

3. 文本组件

文本组件用于插入文本对象,以记录并显示一段文本,这个用的也应该是最多的。除一些基本样式属性之外,还包括各类排版功能。


还有一个组件叫做中文字体组件,它与文本组件的区别在于提供了多种字体供我们选择。要知道在浏览器中是无法指定特殊中文字体的,而中文字体组件的作用就是在后台实时将输入的文本转换为图片,以实现特殊文字的展示。所以说中文字体 本质上是图片并不是文本

4. 输入框组件

输入框组件可通过键盘输入或粘贴的方式自主输入内容,与用户进行数据交互和数据收集。输入框同文本对象类似,允许自主定义输入框外观和文字样式并进行排版,也可定义提示文字。

不得不提的是输入框组件的限制输入类型功能,比如设置为数字,那么在预览时就会强行弹出手机的数字键盘且无法输入文字;设置为密码时则会自动用“*”隐藏。这都是内置已经做了限制的功能,直接使用即可。


此外还可以为输入框添加图标,可使用预设,也可在线搜索自己想要的图标。

5. 富文本/富文本编辑器组件

富文本组件是一款功能强大的文本工具,它比纯文本对象支持更丰富的文本格式。在编辑状态下,可以通过文本编辑区域进行文本编辑,并通过上方属性控制条修改字体样式、对齐方式等,实现快速的文本编辑。如下图;


如果说富文本是让开发者在开发时进行文本的编辑,与网页的用户并不会发生交互。那么富文本编辑器则可内嵌于浏览器,在案例非编辑状态(即已上线状态)下开放富文本编辑界面,容许用户进行富文本的排版和编辑。比如在社区博主帖子下的评论区内置一个富文本编辑器,则可容许用户对自己的评论内容进行样式、格式排版等编辑。

开发者视角

用户视角

6. 地图组件

地图组件有高德、和腾讯两个地图 API,会在案例中插入一个地图控件,具有腾讯/高德地图的基本功能。不仅可以对地图控件进行各项样式编辑,还可以确定中心点、中心位置、缩放、类型等属性。

7. 二维码组件

二维码组件用于在案例中动态生成二维码,除样式的编辑外,我们可以在“二维码数据”数据中指定二维码目标地址,也可以选择图片嵌入二维码。如下图:

篇幅原因,本文只对部分组件做介绍,好用的组件还有很多,如网页、图标、计数器、视频、直播窗等,其余各组件用法基本一致,操作也相同,这里不再赘述。

以上是关于iVX 开发 - 入门UI 组件介绍及实操详解的主要内容,如果未能解决你的问题,请参考以下文章

Apache配置与应用

七功能性组件与事件逻辑(IVX 快速开发教程)

MySQL主从复制与读写分离配置及实操

vuejs 路由:入门实操详解

三界面介绍(IVX快速手册)

oracle错误处理及实操-INS-20802