五、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.pswp.cn/news/286793.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/286793.shtml
英文地址,請注明出處:http://en.pswp.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 "…