五、Web App 基础可视组件属性(IVX 快速开发教程)

五、基础可视组件属性

在 iVX 中各个组件存在不同的属性,这些属性用于设置显示的样式或者是自身具备的特征等,通过更改这些属性可以极大的方便我们进行项目的创作。

大多数组件都拥有相同的属性,相同属性在以下内容中不会赘述介绍;相对应用 与 绝对应用 属性大致相同,在此使用 相对应用 作为实例演示。

文章目录

  • 五、基础可视组件属性
      • 5.1 页面属性
        • 5.1.1 背景颜色
        • 5.1.2 背景图片
        • 5.1.3 垂直对齐
        • 5.1.4 水平对齐
      • 5.2 行属性
        • 5.2.1 行、列的宽度、高度
        • 5.2.2 行、列的内、外边距
        • 5.2.3 行、列的边框
        • 5.2.4 行、列元素的呈现方式
      • 5.3 文本属性
        • 5.3.1 文本属性
        • 5.3.2 最大字符数与溢出效果
        • 5.3.3 最大行数
        • 5.3.4 文字颜色与字体样式
      • 5.4 图片属性
      • 5.5 输入框属性

5.1 页面属性

页面的常用属性有以下几点:

  • 背景颜色
  • 背景图片
  • 垂直对齐
  • 水平对齐

5.1.1 背景颜色

在 页面 中,可以通过改 页面 的 背景颜色 属性更改页面背景颜色。在 对象树 中点击 页面 将会在左侧弹出 属性框,在 属性框 中可以通过 调色板 设置 页面 的背景色,也可以通过 颜色代码 更改 页面 的背景色:

5.1.2 背景图片

页面 的 背景图片 属性用于给 页面 添加一个图片用于 页面 作为背景进行显示。点击 背景图片 的上传按钮将会弹出 资源选择框,此时选择一张图片作为背景后,该 页面 就会用这张图片作为背景显示:

5.1.3 垂直对齐

垂直对齐 属性作用于 页面 中的可视 子对象。垂直对齐 拥有 4 个可选项依次为顶部、居中、底部。在此我们讲解常用的 3 个可选项顶部、居中、底部:

将 垂直对齐 设置为 顶部,页面中的 可视对象 将会从顶部依次往下进行显示;将 垂直对齐 设置为 居中,那么页面中的 可视对象 将会从页面的 垂直中部 进行显示,底部选项 则是从底部开始显示:

5.1.4 水平对齐

水平对齐 指 页面 中的元素横排如何进行显示。水平对齐有 3 个对齐方式,依次是靠左、居中、靠右这三个方式:


靠左 对齐指第 1 个元素在横排显示为左侧、居中则在中部、靠右则在右部开始显示:

5.2 行属性

行的常用属性有以下几点:

  • 宽度
  • 高度
  • 上外边距
  • 下外边距
  • 左外边距
  • 右外边距
  • 上内边距
  • 下内边距
  • 边框宽度
  • 边框颜色
  • 边框类型
  • 边框位置

5.2.1 行、列的宽度、高度

行、列的宽度、高度可以设置成百分比或者具体的像素,行 与 列 是元素的容器,元素设置 具体像素 时将会超出行与列进行显示,但是在设置成 百分比 时将永远按照百分比大小进行显示。

在 行 与 列 中设置宽度可以设置成 百分比 或 具体像素值,设置 百分比 宽度使用百分号 % 结尾,设置宽度为 具体像素值 时使用 px 结尾,行与列高度也是相同的设置方法:

5.2.2 行、列的内、外边距

外边距 我们可以当做 “透明的墙”,可以理解成这个元素与上、下、左、右元素的距离,可以设置 具体的像素值 或 按百分比进行设置:

内边距 我们可以当做内部 “透明的墙”,可以理解成这个元素与内部上、下、左、右元素的距离,可以设置 具体的值 或者按 百分比 进行设置:

5.2.3 行、列的边框

行 与 列 的边框我们可以设置对应的 样式。边框宽度 值是这个元素 边框线 的大小,越大则越粗、越小则越细,指定 边框颜色 可以更改 边框线 的呈现颜色,指定 边框位置 则可设置边框出现的位置:在这里插入图片描述

边框类型有 4 中可设置的样式:


无边框 则不会呈现 边框,实线边框 则是连续不中断的线条将当前元素进行包裹、虚线边框 则是以虚线的方式对边框进行包裹、点状边框 则是以点作为当前元素的边框包裹:

5.2.4 行、列元素的呈现方式

行组件 在 web 页面中以横排呈现,列组件 在 web 页面中以垂直方式呈现元素:


5.3 文本属性

文本组件 一般用于显示文字,在 web 页面做用于提示、说明,常用属性如下:

  • 内容
  • 最大字符数
  • 最大行数
  • 溢出效果
  • 文字颜色
  • 字体样式

5.3.1 文本属性

内容属性 指在文本组件中需要显示的内容,在属性栏中更改文本内容即可更改显示内容:

5.3.2 最大字符数与溢出效果

文本组件 的 最大字符数 指的是文本中所能容纳的最大内容,设置最大字符数可以限定文本长度,设置为 2 则不能显示超过 2 个字符内容:

此处文本超出部分由于溢出效果为 省略号,原因是在文本属性栏中 溢出效果 设置为 显示省略号。

溢出效果 有 3 个选项,修剪文本 表示直接截断多余内容没有任何样式进行显示,溢出 则表示显示多余内容:

5.3.3 最大行数

最大行数 可以使文本多行显示,在此设置最大行数为 2,文本内容过多时将会显示为最多两行内容,若有溢出则会使用省略号进行结尾:

5.3.4 文字颜色与字体样式

文字颜色 可以修改该文本框的呈现颜色,字体样式可以设置加粗、斜体、下划线、删除线:

5.4 图片属性

图片组件 用于图片的显示,可以通过修改图片的 圆角,圆角值越大则角越 “圆滑” 做出比较独特的效果:

5.5 输入框属性

输入框组件 可以更改输入的提示文本做出更人性化的样式,也可以更改内容 可否编辑 属性,使文本框内容设置成可编辑或不可编辑:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【专升本计算机】甘肃省专升本考试计算机热点考点(填空题115道)

甘肃专升本考试计算机填空题热点考点 1 、自计算机问世至今已经经历了四个时代,划分时代的主要依据是计算机的构成元件。 2 、世界上第一台电子数字计算机采用的逻辑元件是电子管。 3 、早期的计算机体积大、耗能高、速度慢,其主要原因是制约于元器件。 4 、当前的计算机一…

【回溯法】竞赛游戏

题目描述 某游戏规则中,甲乙双方战斗,每一回合总能分出胜负,游戏规定: 1.失败的一方要将自己体力值的1/4加给胜利的一方。 2.游戏开始时,甲的体力值是1000,乙的体力值是2000。 3.每一回合,甲乙胜…

zabbix自动发现(Discovery)功能使用

随着监控主机不断增多,有的时候需要添加一批机器,特别是刚用zabbix的童鞋 需要将公司的所有服务器添加到zabbix,如果使用传统办法去单个添加设备、分组、项目、图像…..结果应该是让人吐的结果。 鉴于这个问题我们可以好好利用下Zabbix大…

Apache之三种工作模式和配置性能优化

1 Apache的3种模式和版本 Apache目前一共有三种稳定的MPM(Multi-Processing Module,多进程处理模块)模式,它们分别是prefork,worker和event。 我们可以使用httpd -V 命令查看apache的版本和模式,如果你服务…

lsof命令

lsof, LiSt Opened Files, 列出打开的文件, 听起来很简单的样子. 但想*nix中很多其他工具一样, lsof把这件简单的事情做到了炉火纯青. 因为Unix认为”一切皆文件”, 那么”打开的文件”就不仅仅是传统意义上打开的文件了, 还可以是网络/Unix域套接字, 匿名/具名管道, 共享库文件…

React-引领未来的用户界面开发框架-读书笔记(二)

第4章 数据流 由于react的数据流向是单向的(其父节点传递到子节点), 因此组件是简单且易于把握的(它们只需要从父节点获取props渲染即可) 假如顶层组件的某个prop改变了,react会递归地向下遍历整个组件树&a…

六、WebApp 二手信息站点页面制作(IVX 快速开发教程)

六、二手信息站点页面制作 在了解了基础可视组件后,我们可以通过这些可视组件进行站点页面开发,在此以一个二手交易网站站点页面为例,本教程示例并不是成熟完善的示例,需要各位读者进行少量完善,示例只是用于功能讲解…

【专升本计算机】甘肃省专升本考试公共课计算机填空题考点汇总

甘肃专升本考试公共课计算机填空题考点汇总 Excel 工作簿文件的默认扩展名为 xls 。 Excel 主界面窗口中编辑栏上的 “fx” 按钮用来向单元格插入函数。 用来给电子工作表中的行号进行编号的是数字。 在 Excel 中,输入数字作为文本使用时,需要输入作为先导标记的字符是单引…

Blazor University (25)路由 —— 通过 HTML 导航

原文链接&#xff1a;https://blazor-university.com/routing/navigating-our-app-via-html/通过 HTML 导航源代码[1]链接到 Blazor 组件中的路由的最简单方法是使用 HTML 超链接。<a href"/Counter">This works just fine</a>Blazor 组件中的超链接会被…

css3选择器详解

css3选择器详解css中除了早先最早的&#xff0c;ID选择器&#xff0c;class选择器一些以外在css3中新加入了新的选择器&#xff0c;新选择器的使用大大的方便了我们的编程&#xff0c;下面我就说一些css3的选择器的使用方法&#xff0c; p 选择了所有<p>元素的标签…

OpenReports中文支持方案

此文章在《OpenReports中文支持完全解决方案.doc》的基础上做优化&#xff0c;并贴出代码。已测试通过。 一、主要解决的问题 1 页面显示支持中文 2 与服务器或数据库的交互支持中文 3 查询结果支持中文 4 导出文件名及内容支持中文 二、解决方案及方法 1 …

LeetCode之First Unique Character in a String

1、题目 Given a string, find the first non-repeating character in it and return its index. If it doesnt exist, return -1. Examples: s "leetcode" return 0.s "loveleetcode", return 2. 2、代码实现 public class Solution {public int firstU…

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

七、功能性组件与事件逻辑 由于 iVX 极度易用的特性&#xff0c;在 iVX 中开发微信小程序、WebApp、小游戏应用的开发流程大致相同。介绍完基础可视化组件后通过后台的服务、数据库与事件结合即可完成一个应用的开发&#xff1b;此篇将会介绍 iVX 功能性组件与事件&#xff0c…

python assert的作用

一、python assert的作用&#xff1a; 根据Python 官方文档解释(https://docs.python.org/3/reference/simple_stmts.html#assert), "Assert statements are a convenient way to insert debugging assertions into a program". 二、一般的用法是&#xff1a; assert…

React-引领未来的用户界面开发框架-读书笔记(三)

第8章 DOM操作 多数情况下&#xff0c;React的虚拟DOM足以用来创建你想要的用户体验&#xff0c;而根本不需要直接操作底层真实的DOM。然而也有一些例外。最常见的场景包括&#xff1a;需要与一个没有使用React的第三方类库进行整合&#xff0c;或者执行一个React没有原生支持的…

【专升本计算机】甘肃省普通高等学校专升本考试计算机全真模拟试卷(一)

甘肃省普通高等学校专升本考试计算机全真模拟试卷(一) 一、单项选择题(在每小题给出的四个选项中只有一项是正确的,将正确选项的字母序号填在括号内。每小题1分,共60分。) 1.在Excel中,当单元格中出现#N/A时,表示( )。 A.公式中有Excel不能识别的文本 B.公式或函数…

WPF 基础控件之 ToggleButton 样式

其他基础控件1.Window2.Button3.CheckBox4.ComboBox5.DataGrid 6.DatePicker7.Expander8.GroupBox9.ListBox10.ListView11.Menu12.PasswordBox13.TextBox14.RadioButtonToggleButton 实现下面的效果1&#xff09;ToggleButton来实现动画&#xff1b;Border嵌套 Ellipse并设置T…

hdu-5781 ATM Mechine(dp+概率期望)

题目链接&#xff1a; ATM Mechine Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem DescriptionAlice is going to take all her savings out of the ATM(Automatic Teller Machine). Alice forget how many deposit she has, …

Android之让手机能识别当前app为浏览器类型的APP

1 、问题 我们设置手机默认浏览器的时候&#xff0c;我们一般在“设置”页面&#xff0c;点击"默认应用管理“&#xff0c;然后再点击浏览器&#xff0c;发现里面没有当前的app,但是会有一些QQ浏览器(前提手机安装了)或者其它浏览器&#xff0c;我们怎么让系统能识别自己…

反射调用 java bean的set和get方法

v一、使用java.beans.PropertyDescriptor import java.beans.IntrospectionException; import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Method;public class PropertyUtil {private static final String SET_PREFIX "…