認識酷森、了解酷森、選擇酷森
互聯酷之道 企業森動力
cascade級聯組(zu)件(jian)定(ding)義:存在(zai)父子層級關系的選擇(ze)枚舉(ju)組(zu)件(jian)。
使用(yong)場景:用(yong)于含有層(ceng)級關(guan)系(xi)的枚舉組(zu)(zu)件,例(li)如(ru):省市(shi)、組(zu)(zu)織架構、不同導航(hang)層(ceng)級等;點擊激(ji)活選擇(ze)框(kuang),出現(xian)級聯選擇(ze)浮層(ceng)。例(li)如(ru):boss直聘首(shou)頁(ye)搜(sou)索,前置公司所在城市(shi),點擊城市(shi)出現(xian)城市(shi)選擇(ze)組(zu)(zu)件,鼠(shu)標hover出現(xian)下級選項。
基礎樣式:只能選擇(ze)枚舉,不支持在選擇(ze)框中進(jin)行關(guan)鍵詞搜(sou)索(suo),且為單選。用(yong)戶選擇(ze)選項(xiang)后,浮(fu)層(ceng)收(shou)起,表單為完成態。
存在(zai)下(xia)級(ji)菜(cai)單的(de)選項會(hui)出(chu)現右箭頭,提示用戶含有(you)下(xia)一級(ji)選項,鼠標hover出(chu)現下(xia)一級(ji)選項。
清空樣式(shi):用(yong)戶(hu)可以使(shi)用(yong)空選項填寫表單(dan),防(fang)止用(yong)戶(hu)輸入(ru)數據后(hou)沒法取消(xiao)所(suo)輸入(ru)的數據。
激(ji)活,出現第一級的級聯浮(fu)層,如果存在下一級則(ze)對應(ying)選項(xiang)出現右箭頭,hover出現下一級選項(xiang)。含有清空(kong)(kong)選項(xiang)的枚舉項(xiang),選擇清空(kong)(kong)則(ze)數據為空(kong)(kong)提交。
含有搜(sou)索樣式(可選(xuan)(xuan)擇(ze)空選(xuan)(xuan)項):可通過搜(sou)索快速查詢到(dao)所需要到(dao)枚(mei)舉項。輸入關鍵詞(ci),出現(xian)的下拉選(xuan)(xuan)擇(ze)以路徑的形(xing)式展示,匹(pi)配關鍵詞(ci)高亮。
inputnumber數(shu)字輸(shu)入定義:僅允許輸(shu)入數(shu)值(zhi)(zhi)的組件,如果(guo)涉及(ji)到日期的話(hua),且數(shu)值(zhi)(zhi)以(yi)年(nian)(nian)(nian)份日期的數(shu)據存儲,例如:今年(nian)(nian)(nian)是 2018 年(nian)(nian)(nian),inputnumber工(gong)作年(nian)(nian)(nian)限為 5 年(nian)(nian)(nian),則后端儲存為 2013 年(nian)(nian)(nian),到了 2019 年(nian)(nian)(nian)數(shu)值(zhi)(zhi)變為 6 年(nian)(nian)(nian)。
使用(yong)場景:當用(yong)戶需(xu)要輸(shu)(shu)(shu)入(ru)數值時;僅允許數字格式。基礎樣式:只能(neng)輸(shu)(shu)(shu)入(ru)數值,當輸(shu)(shu)(shu)入(ru)其他格式的(de)時候(hou),出現報錯提示(shi),同時輸(shu)(shu)(shu)入(ru)框(kuang)的(de)輸(shu)(shu)(shu)入(ru)內容清空。
變種樣式:含有(you)人民幣(bi)(bi),百分比(bi)的(de)數值等,需(xu)要將(jiang)人民幣(bi)(bi)、百分比(bi)的(de)符號體現出來,這時候就(jiu)要用到輸入點的(de)樣式。
radio單(dan)選組件(jian)定義:一組互斥的選項,僅單(dan)選。
使(shi)用場景(jing):選(xuan)項低(di)于五個時(shi),且(qie)為單選(xuan);和(he)select的區(qu)別是選(xuan)項全(quan)部展示出來(lai)。例如:boss直(zhi)聘填寫個人(ren)信息時(shi),性別選(xuan)擇男(nan)女(nv)時(shi),就是一(yi)個radio單選(xuan)組件(jian)。
基礎樣式:當單選時,且選擇項比較少時,選擇項都展示出來(lai),使用(yong)單選組(zu)件(jian)。
變(bian)種樣式(shi):選項和控(kong)件合為一體,整(zheng)體更直觀。
checkbox復(fu)選框定(ding)義:對(dui)于同一組選項(xiang),可以選擇多項(xiang)的(de)組件。
使用(yong)場景:在一組(zu)可選(xuan)項中進行(xing)多(duo)項選(xuan)擇時;單獨使用(yong)可以表示兩種狀(zhuang)態之間的(de)切(qie)換。基礎樣式:多(duo)項選(xuan)項需要選(xuan)擇時使用(yong)。
單獨使(shi)用:單獨使(shi)用可(ke)以(yi)表示選(xuan)中(zhong)或非(fei)選(xuan)中(zhong)兩種狀態之間的切換。
switch開(kai)(kai)關(guan)定義:用于開(kai)(kai)啟(qi)/關(guan)閉的選擇。
使用場景:需要表示開關(guan)狀態/兩種狀態之(zhi)間的(de)切(qie)換時(shi);表示兩種相互(hu)對立的(de)狀態間的(de)切(qie)換。基礎(chu)樣式:默認打開關(guan)閉(bi)根據業(ye)務需求決定,僅展示開關(guan)控件。
帶有文(wen)字(zi)樣式:默認打開關閉根據業務需求決定,開關控(kong)件上有文(wen)字(zi)提示該控(kong)件的狀態。
禁用樣(yang)式:不可(ke)操作(zuo),只(zhi)可(ke)查看(kan)開關按鈕(niu)狀態。