五、基礎可視組件屬性
在 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 輸入框屬性
輸入框組件 可以更改輸入的提示文本做出更人性化的樣式,也可以更改內容 可否編輯 屬性,使文本框內容設置成可編輯或不可編輯: