認識酷森、了(le)解酷森、選擇酷森

互聯酷之道 企業森動力

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

網站開發建設

www.kosn.cn

設計規範 | Web端設計組件篇:級聯、數字輸入、單複選框和(hé)開關

分(fēn)享到:
來(lái)源:本站原創      2019年09月(yuè)24日
字号:T|T

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

使用(yòng)場(chǎng)景:用(yòng)于含有層級關系的(de)枚舉組件,例如:省市、組織架構、不同導航層級等;點擊激活選擇框,出現級聯選擇浮層。例如:boss直聘首頁搜索,前置公司所在城(chéng)市,點擊城(chéng)市出現城(chéng)市選擇組件,鼠标hover出現下(xià)級選項。

基礎樣式:隻能選擇枚舉,不支持在選擇框中進行關鍵詞搜索,且爲單選。用(yòng)戶選擇選項後,浮層收起,表單爲完成态。

存在下(xià)級菜單的(de)選項會出現右箭頭,提示用(yòng)戶含有下(xià)一級選項,鼠标hover出現下(xià)一級選項。

清空樣式:用(yòng)戶可(kě)以使用(yòng)空選項填寫表單,防止用(yòng)戶輸入數據後沒法取消所輸入的(de)數據。

激活,出現第一級的(de)級聯浮層,如果存在下(xià)一級則對(duì)應選項出現右箭頭,hover出現下(xià)一級選項。含有清空選項的(de)枚舉項,選擇清空則數據爲空提交。

含有搜索樣式(可(kě)選擇空選項):可(kě)通(tōng)過搜索快(kuài)速查詢到所需要到枚舉項。輸入關鍵詞,出現的(de)下(xià)拉選擇以路徑的(de)形式展示,匹配關鍵詞高(gāo)亮。

inputnumber數字輸入定義:僅允許輸入數值的(de)組件,如果涉及到日期的(de)話(huà),且數值以年份日期的(de)數據存儲,例如:今年是 2018 年,inputnumber工作年限爲 5 年,則後端儲存爲 2013 年,到了(le) 2019 年數值變爲 6 年。

使用(yòng)場(chǎng)景:當用(yòng)戶需要輸入數值時(shí);僅允許數字格式。基礎樣式:隻能輸入數值,當輸入其他(tā)格式的(de)時(shí)候,出現報錯提示,同時(shí)輸入框的(de)輸入内容清空。

變種樣式:含有人(rén)民币,百分(fēn)比的(de)數值等,需要将人(rén)民币、百分(fēn)比的(de)符号體現出來(lái),這(zhè)時(shí)候就要用(yòng)到輸入點的(de)樣式。

radio單選組件定義:一組互斥的(de)選項,僅單選。

使用(yòng)場(chǎng)景:選項低于五個(gè)時(shí),且爲單選;和(hé)select的(de)區(qū)别是選項全部展示出來(lái)。例如:boss直聘填寫個(gè)人(rén)信息時(shí),性别選擇男(nán)女(nǚ)時(shí),就是一個(gè)radio單選組件。

基礎樣式:當單選時(shí),且選擇項比較少時(shí),選擇項都展示出來(lái),使用(yòng)單選組件。

變種樣式:選項和(hé)控件合爲一體,整體更直觀。

checkbox複選框定義:對(duì)于同一組選項,可(kě)以選擇多(duō)項的(de)組件。

使用(yòng)場(chǎng)景:在一組可(kě)選項中進行多(duō)項選擇時(shí);單獨使用(yòng)可(kě)以表示兩種狀态之間的(de)切換。基礎樣式:多(duō)項選項需要選擇時(shí)使用(yòng)。

單獨使用(yòng):單獨使用(yòng)可(kě)以表示選中或非選中兩種狀态之間的(de)切換。

switch開關定義:用(yòng)于開啓/關閉的(de)選擇。

使用(yòng)場(chǎng)景:需要表示開關狀态/兩種狀态之間的(de)切換時(shí);表示兩種相互對(duì)立的(de)狀态間的(de)切換。基礎樣式:默認打開關閉根據業務需求決定,僅展示開關控件。

帶有文字樣式:默認打開關閉根據業務需求決定,開關控件上有文字提示該控件的(de)狀态。

禁用(yòng)樣式:不可(kě)操作,隻可(kě)查看開關按鈕狀态。