午夜天堂精品久久久久,欧美日韩综合一区二区三区,99久久亚洲精品日本无码,国产亚洲精品久久久久的角色,免费看又黄又无码的网站

認識酷森、了解酷森、選擇酷森

互聯酷之道 企業森動力

當前位置: 首頁 > 酷森專欄 > 網站開發建設

網站開發建設

chinaweld.net

設計規范 | Web端設計組件篇:級聯、數字輸入、單復選框和開關

分享到(dao):
來源:本站原創      2019年09月24日
字號:T|T

cascade級聯組件定義:存在父子層(ceng)級關系的選(xuan)擇枚舉組件。

使用場景:用于(yu)含有層(ceng)級(ji)關系的枚舉組件,例如(ru):省市、組織架構、不同導航層(ceng)級(ji)等;點擊(ji)激活選(xuan)擇框(kuang),出現級(ji)聯(lian)選(xuan)擇浮層(ceng)。例如(ru):boss直聘首頁搜索,前置公(gong)司所在(zai)城(cheng)市,點擊(ji)城(cheng)市出現城(cheng)市選(xuan)擇組件,鼠標(biao)hover出現下級(ji)選(xuan)項(xiang)。

基礎樣式(shi):只能(neng)選(xuan)擇(ze)(ze)枚舉,不支持(chi)在選(xuan)擇(ze)(ze)框中進行關(guan)鍵詞搜索(suo),且為單選(xuan)。用戶選(xuan)擇(ze)(ze)選(xuan)項后,浮層收起,表單為完成態。

存在下(xia)(xia)級菜單的(de)選項會出(chu)現右箭(jian)頭,提示用戶(hu)含有下(xia)(xia)一級選項,鼠標hover出(chu)現下(xia)(xia)一級選項。

清(qing)空樣式(shi):用(yong)(yong)戶可以使用(yong)(yong)空選項填寫表單,防(fang)止用(yong)(yong)戶輸入(ru)數據后(hou)沒法取消所(suo)輸入(ru)的數據。

激活,出現(xian)第一(yi)級(ji)的級(ji)聯浮(fu)層,如果存在下一(yi)級(ji)則對應(ying)選(xuan)(xuan)項出現(xian)右箭頭,hover出現(xian)下一(yi)級(ji)選(xuan)(xuan)項。含有(you)清(qing)空選(xuan)(xuan)項的枚舉項,選(xuan)(xuan)擇清(qing)空則數據為空提交。

含有搜(sou)索(suo)樣(yang)式(可選擇(ze)空選項(xiang)(xiang)):可通過搜(sou)索(suo)快(kuai)速查詢(xun)到所(suo)需要到枚舉(ju)項(xiang)(xiang)。輸入關鍵詞,出現的(de)下拉選擇(ze)以路徑(jing)的(de)形式展示,匹配關鍵詞高亮。

inputnumber數(shu)(shu)字輸(shu)入定義:僅允(yun)許輸(shu)入數(shu)(shu)值(zhi)的組(zu)件,如(ru)果涉及到(dao)日期(qi)的話(hua),且數(shu)(shu)值(zhi)以年(nian)(nian)份日期(qi)的數(shu)(shu)據(ju)存儲(chu),例如(ru):今(jin)年(nian)(nian)是 2018 年(nian)(nian),inputnumber工作(zuo)年(nian)(nian)限為(wei) 5 年(nian)(nian),則后(hou)端(duan)儲(chu)存為(wei) 2013 年(nian)(nian),到(dao)了 2019 年(nian)(nian)數(shu)(shu)值(zhi)變為(wei) 6 年(nian)(nian)。

使用場景:當(dang)用戶需要輸入數(shu)值(zhi)時;僅(jin)允許數(shu)字格(ge)式(shi)。基礎(chu)樣式(shi):只能輸入數(shu)值(zhi),當(dang)輸入其(qi)他(ta)格(ge)式(shi)的時候,出現(xian)報(bao)錯提(ti)示,同時輸入框(kuang)的輸入內容(rong)清空。

變種樣(yang)(yang)式(shi):含有人民幣,百(bai)分比(bi)的(de)數(shu)值等,需要(yao)將人民幣、百(bai)分比(bi)的(de)符號體現出來(lai),這時(shi)候就要(yao)用(yong)到輸入點(dian)的(de)樣(yang)(yang)式(shi)。

radio單(dan)選(xuan)(xuan)組件定義(yi):一(yi)組互(hu)斥的選(xuan)(xuan)項,僅(jin)單(dan)選(xuan)(xuan)。

使用場景:選項低于五個時,且為單(dan)選;和select的區別是(shi)選項全部展示(shi)出來(lai)。例如:boss直聘填(tian)寫個人信息(xi)時,性別選擇男(nan)女時,就是(shi)一個radio單(dan)選組件(jian)。

基礎樣式:當單選(xuan)時,且選(xuan)擇項比(bi)較少時,選(xuan)擇項都展示出來(lai),使用單選(xuan)組(zu)件。

變(bian)種樣式:選項和控(kong)件合為(wei)一(yi)體,整(zheng)體更(geng)直觀。

checkbox復選(xuan)框定義:對(dui)于同一組(zu)選(xuan)項(xiang),可以(yi)選(xuan)擇多項(xiang)的組(zu)件(jian)。

使用場景:在一組可(ke)選(xuan)項中(zhong)進行多項選(xuan)擇時(shi);單(dan)獨使用可(ke)以表示(shi)兩種狀態之間的切(qie)換(huan)。基礎樣(yang)式:多項選(xuan)項需(xu)要選(xuan)擇時(shi)使用。

單(dan)獨使(shi)(shi)用(yong):單(dan)獨使(shi)(shi)用(yong)可以表示(shi)選中或非(fei)選中兩(liang)種(zhong)狀態之間的切換。

switch開關定義(yi):用于開啟/關閉的選擇。

使用場(chang)景:需(xu)要表示開(kai)關狀態/兩種狀態之間的切換時(shi);表示兩種相互(hu)對立的狀態間的切換。基礎樣式(shi):默(mo)認打開(kai)關閉(bi)根據(ju)業務需(xu)求(qiu)決(jue)定(ding),僅展示開(kai)關控件。

帶有文(wen)字(zi)樣式:默認打開關(guan)(guan)閉根據(ju)業(ye)務需求決定,開關(guan)(guan)控(kong)件上有文(wen)字(zi)提(ti)示該控(kong)件的狀態(tai)。

禁用樣式:不可操(cao)作,只可查看開關按鈕(niu)狀(zhuang)態(tai)。