Skip to content

级联选择

下拉面板

选项数量:最多展示8个选择项,少于8个则显示实际个数自适应,多余8个则出现滚动条。

下拉选择器根据屏幕位置决定向下展示或者向上展示;若下拉菜单处于页面右侧,则需要考虑下拉菜单贴边显示处理;若下拉菜单处于页面底部,则需要考虑下拉菜单贴边显示处理。

何时使用

● 需要从一组相关联的数据集合进行选择,例如:省市区,公司组织层级,事物分类等。

● 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。

● 比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。

● 支持级联单选和级联多选。

基础用法

常规、Hover、激活、 失焦、不可用。

单选选中后:选择完成后根据业务可以选择两种展示方式:a.只展示只展示末级选项名称;b.展示每一级展示每一级完整路径。选择后Hover:显示清除按钮,点击清除清除所选,恢复至未选常规状态。

常规、Hover、激活、 失焦、不可用。

多选选中后,展示标签样式,可根据业务需要选择两种展示方式:a.只展示只展示末级选项名称;b.展示每一级展示每一级完整路径。选择后Hover:显示清除按钮,点击清除清除所选,恢复至未选常规状态。

尺寸

提供大、中(默认)、小三种不同尺寸的的选择器

布局

选择器下拉面板可指定弹出的位置,确保其布局在页面可视区内

输入搜索 / 单选

搜索:输入后高亮匹配的文字,存在两种关键词匹配逻辑,可根据业务需要选择。a.仅可选择最后一级,层级中匹配到多个关键词,仅显示为一条。b.可选择任意一级,层级中匹配到多个关键词,根据层级分别显示;选中:选中后下拉收起; 选中再次激活:已选选项变为暗提示,再次出现光标,下拉框展开定位至已选选项;

输入搜索/多选

搜索:输入后高亮匹配的文字,存在两种关键词匹配逻辑,可根据业务需要选择。a.仅可选择最后一级,层级中匹配到多个关键词,仅显示为一条。b.可选择任意一级,层级中匹配到多个关键词,根据层级分别显示;选中:选中选项复选给于勾选标记;选中再次激活:已选选项变为暗提示,再次出现光标。输入后若搜索文字右侧承载不下则换行显示;搜索无结果支持新增选项,点击新增后新增该输入的选项值;