五、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 輸入框屬性
輸入框組件 可以更改輸入的提示文本做出更人性化的樣式，也可以更改內容 可否編輯 屬性，使文本框內容設置成可編輯或不可編輯：
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的五、Web App 基础可视组件属性（IVX 快速开发教程）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 四、WebApp 基础可视组件（IVX
- 下一篇： 六、WebApp 二手信息站点页面制作（