cascade级联组件
视频及原型文件下载:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定义:当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。
交互原则:
1、级联选择器的层级不易过多,超过5级建议调整数据结构或改用其他交互方式;
2、控件设计时需要考虑页面大小,避免出现超过页面范围无法点击的尴尬情况;
3、如果可多选,要给予用户反馈,当前都选择了哪些,让用户知道立刻知道是否有选择错误;
交互说明:
1、【默认文案】:说明输入前提示的文案内容,例如:请选择收货地址;
2、【内容的枚举和层级】:需要说明里面数据结构、父子关系、数据的层级,例如:级联内容为省市区三层数据结构,选择省后,通过省选择该省内的市,通过市选择该市下的区域;
3、【级联样式】:说明使用的级联样式,是否需要搜索、禁用状态等。
使用场景:
1、用于含有层级关系的枚举组件,例如:省市、组织架构、不同导航层级等;
2、点击激活选择框,出现级联选择浮层。
例如:boss直聘首页搜索,前置公司所在城市,点击城市出现城市选择组件,鼠标hover出现下级选项。
基础样式:只能选择枚举,不支持在选择框中进行关键词搜索,且为单选。用户选择选项后,浮层收起,表单为完成态。
存在下级菜单的选项会出现右箭头,提示用户含有下一级选项,鼠标hover出现下一级选项。
清空样式:用户可以使用空选项填写表单,防止用户输入数据后没法取消所输入的数据。
激活,出现第一级的级联浮层,如果存在下一级则对应选项出现右箭头,hover出现下一级选项。含有清空选项的枚举项,选择清空则数据为空提交。
含有搜索样式(可选择空选项):可通过搜索快速查询到所需要到枚举项。输入关键词,出现的下拉选择以路径的形式展示,匹配关键词高亮。