cascade級聯(lián)組件
視頻及原型文件下載:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定義:當(dāng)一個(gè)數(shù)據(jù)集合有清晰的層級結(jié)構(gòu)時(shí)菱涤,可通過級聯(lián)選擇器逐級查看并選擇。
交互原則:
1包竹、級聯(lián)選擇器的層級不易過多里烦,超過5級建議調(diào)整數(shù)據(jù)結(jié)構(gòu)或改用其他交互方式派继;
2、控件設(shè)計(jì)時(shí)需要考慮頁面大小,避免出現(xiàn)超過頁面范圍無法點(diǎn)擊的尷尬情況岸售;
3、如果可多選厂画,要給予用戶反饋凸丸,當(dāng)前都選擇了哪些,讓用戶知道立刻知道是否有選擇錯(cuò)誤袱院;
交互說明:
1屎慢、【默認(rèn)文案】:說明輸入前提示的文案內(nèi)容,例如:請選擇收貨地址忽洛;
2腻惠、【內(nèi)容的枚舉和層級】:需要說明里面數(shù)據(jù)結(jié)構(gòu)、父子關(guān)系欲虚、數(shù)據(jù)的層級集灌,例如:級聯(lián)內(nèi)容為省市區(qū)三層數(shù)據(jù)結(jié)構(gòu),選擇省后复哆,通過省選擇該省內(nèi)的市欣喧,通過市選擇該市下的區(qū)域腌零;
3、【級聯(lián)樣式】:說明使用的級聯(lián)樣式唆阿,是否需要搜索益涧、禁用狀態(tài)等。
使用場景:
1驯鳖、用于含有層級關(guān)系的枚舉組件闲询,例如:省市、組織架構(gòu)臼隔、不同導(dǎo)航層級等嘹裂;
2、點(diǎn)擊激活選擇框摔握,出現(xiàn)級聯(lián)選擇浮層寄狼。
例如:boss直聘首頁搜索,前置公司所在城市氨淌,點(diǎn)擊城市出現(xiàn)城市選擇組件泊愧,鼠標(biāo)hover出現(xiàn)下級選項(xiàng)。
基礎(chǔ)樣式:只能選擇枚舉盛正,不支持在選擇框中進(jìn)行關(guān)鍵詞搜索删咱,且為單選。用戶選擇選項(xiàng)后豪筝,浮層收起痰滋,表單為完成態(tài)。
存在下級菜單的選項(xiàng)會(huì)出現(xiàn)右箭頭续崖,提示用戶含有下一級選項(xiàng)敲街,鼠標(biāo)hover出現(xiàn)下一級選項(xiàng)。
清空樣式:用戶可以使用空選項(xiàng)填寫表單严望,防止用戶輸入數(shù)據(jù)后沒法取消所輸入的數(shù)據(jù)多艇。
激活,出現(xiàn)第一級的級聯(lián)浮層像吻,如果存在下一級則對應(yīng)選項(xiàng)出現(xiàn)右箭頭峻黍,hover出現(xiàn)下一級選項(xiàng)。含有清空選項(xiàng)的枚舉項(xiàng)拨匆,選擇清空則數(shù)據(jù)為空提交姆涩。
含有搜索樣式(可選擇空選項(xiàng)):可通過搜索快速查詢到所需要到枚舉項(xiàng)。輸入關(guān)鍵詞惭每,出現(xiàn)的下拉選擇以路徑的形式展示阵面,匹配關(guān)鍵詞高亮。