Cascader 级联选择器

当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

  • 设计
  • 文档
  • Design Token

简介

· 级联选择器是一种从一组具有关联性的数据集合中进行选择的交互组件;

· 级别数因业务需求而定,建议不超过5级。

基本构成

forms 01

类型下拉选择器(A)菜单(B)输入框(C)清除按钮(D)
1不可输入x可选
2可输入x可选

A.下拉选择器

B.菜单

展示选项/检索结果的菜单。

C.输入框

带检索功能的输入容器。

D.清除按钮(可选)

用于一键删除所有已选/输入内容。

基本样式

级联选择器根据功能分为下拉选择(不可输入)、输入检索(可输入)两种类型。

尺寸

级联选择器 Cascader 预设了lgmdsm三种尺寸,高度分别为32px、 28px、24px。

styles_01
styles_01

基本状态

状态说明
默认组件初始状态
悬停选择器:鼠标经过选择器时,切换至该状态;菜单:鼠标hover父级选项时,自动展开下一级菜单,下拉框高度对齐;当内容超出组件宽度,以“…”形式展示,鼠标hover显示完整内容
点选点选选项,下拉框全部收起,选择器中出现选中内容(包括父级关系);选中选项后再次触发选择器,自动展开到选中项一级,同时选中项及其父级菜单全部做视觉区分处理
加载下拉框数据加载较慢时需给出loading提示,以缓解用户的焦虑感
报错当数据由于网络问题、接口问题等情况无法正常加载时,给予用户明确提示
禁用当前行动点不可用,建议配合提示说明
空数据当数据为空时,需给出明确提示告诉用户当前没有可选的数据。

默认状态

states 01

激活状态

states 02

悬停状态

states 03

加载状态

states 04

报错

states 05

禁用状态

states 06

空数据状态

states 07

设计说明

在界面中如何使用该组件?

1.使用目的

  • 由于子集目录隐藏,级联是一种节约屏幕空间的有效方法;
  • 比起使用多个 Select 组件,可以在同一个浮层中完成选择,有较好的体验,提高效率。

2.使用场景

  • 多用于表单类场景中,需要从一组相关联的数据集合进行选择,例如省市区。

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

常见问题

清除按钮出现时机

清除按钮仅在选择器有选中项时hover出现,无选中项时hover选择器不出现清除icon。

有选中项时,鼠标hover选择器,出现清除icon。

problems 01

无选中项时,鼠标hover选择器,出现清除icon。

problems 02

相关文档

  1. Select 选择器
  2. Tree 树控件
Copyright © 2021-2022 UCloud 优刻得科技股份有限公司