Echo :依據(jù)部件的主要用途,能夠分成六大類,F(xiàn)eedback 意見反饋、form 表格、basic 基本、data 數(shù)據(jù)信息 、navigation 導航欄、other 別的。
表格在網(wǎng)頁頁面中關(guān)鍵承擔數(shù)據(jù)收集作用;用戶必須填好鍵入數(shù)據(jù)信息而且遞交到數(shù)據(jù)庫查詢,則這類部件便是表格類。
文中關(guān)鍵解讀表格中的文本和選擇器,在其中文本分成 input 短文本、InputAutocomplete 短文本想到和 InputMultiline 長文本。

一、input 短文本
界定:用以用戶文本鍵入,并以字符串數(shù)組的方法遞交到數(shù)據(jù)庫查詢。
應用情景:
用戶必須鍵入標識符時。
根據(jù)鼠標和鍵盤鍵入內(nèi)容。
鍵入的文本一般 放置輸入框。
比如考拉海購優(yōu)惠劵換取的表格填好,便是短文本鍵入部件,前邊是文章標題,后邊是文本輸入框。
input 短文本部件的展現(xiàn)方式能夠分成三類:
文章標題和輸入框上下排序;
文章標題和輸入框左右排序;
不用文章標題的排序。
文章標題和輸入框上下排序時,短文本部件存有的情況有原始態(tài)、激話態(tài)、出錯態(tài)、進行態(tài)和禁止使用態(tài)。
普遍的表格類排版設計全是上下排版設計,另外表格中間,文章標題選用左兩端對齊,輸入框左兩端對齊的狀況比較多。有時文章標題名稱太長得話,上下排序就不足好,此刻必須選用左右排序。
文章標題和輸入框左右排版設計時,存有情況和上下排序是一致的。
當沒有文章標題時,存有情況同上下排序的標準和邏輯性。

二、InputAutocomplete 短文本想到
界定:用戶用以文本鍵入,在鍵入全過程中會想到配對文本選擇項,并以字符串數(shù)組的方法遞交到數(shù)據(jù)庫查詢。
應用情景:
必須用戶鍵入文本時。
給予想到配對文本,降低用戶鍵入成本費。
在鍵入全過程中依據(jù)用戶鍵入的內(nèi)容,發(fā)生配對選擇項,遞交的數(shù)據(jù)信息是文本并非枚舉類型項。
比如網(wǎng)頁搜索,在輸入框輸入關(guān)鍵字的時候會發(fā)生相匹配的想到配對文本。
和 input 短文本部件對比,InputAutocomplete 短文本想到唯一的不一樣便是增加了想到配對選擇項,而且遞交的是文本并非枚舉類型項。
文章標題和輸入框上下排序時,InputAutocomplete 短文本想到部件存有的情況有原始態(tài)、激話態(tài)、出錯態(tài)、進行態(tài)和禁止使用態(tài)。
左右排序的情況和標準邏輯性同上下排序。
沒有文章標題的情況和標準邏輯性同上下排序。

三、InputMultiline 長文本
界定:用戶用以長文本鍵入,并以文本的方法遞交到數(shù)據(jù)庫查詢。
應用情景:
多段文字輸入。
必須自動換行。
鍵入的文本一般 放置輸入框中。
比如微博,在輸入框發(fā)布微博時,便是長文本鍵入,能夠自動換行。
文章標題和輸入框上下排序時,InputMultiline 長文本存有的情況有原始態(tài)、激話態(tài)、出錯態(tài)、進行態(tài)和禁止使用態(tài)。在鍵入全過程中一般有統(tǒng)計字數(shù),超出限定篇幅,不允許用戶鍵入。
左右排序邏輯性和標準同上下排序。
沒有文章標題的邏輯性同上下排序。

四、select 選擇器
界定:用戶根據(jù)挑選枚舉類型項,遞交到網(wǎng)絡服務器。后端開發(fā)儲存為枚舉類型項。
應用情景:
彈出來一個下拉選項給用戶挑選實際操作。
當選擇項較少時(低于5項),提議立即將選擇項鋪平,應用 Radio 是更強的挑選。
比如淘寶商家后臺管理挑選訂單信息的情況時,點一下選擇器,發(fā)生下拉框。這就是一個普遍的選擇器,選擇器分成多選題和單項選擇題兩類。
下面的圖為選擇器基本上款式,便是簡易的下拉選項,不能開展關(guān)鍵字的檢索。
下面的圖是能夠檢索的選擇器,當輸入框處在激話態(tài)時,浮起下拉框。在鍵入全過程中,發(fā)生配對枚舉類型項,點一下枚舉類型項,則鍵入的關(guān)鍵字清除,另外下拉選項收攏。輸入框發(fā)生挑選的選擇項。
有時存有一個情景,用戶對必須填好的選擇項設成空選擇項,則必須空值的選擇項。
有時存有一個情景,用戶挑選了一個選擇項,可是后邊想除掉挑選的選擇項,不開展挑選。
選擇器多選題部件中必須留意的一點便是,用戶在輸入關(guān)鍵字中,挑選相匹配下拉選項,則鍵入的字符串數(shù)組清除,另外發(fā)生該選擇項 tag。