Skip to main content

级联选择

在选择器选项数量较大时,采用多级分类的方式将选项进行分隔,便于用户选择。

比如地址选择,就可以按省市区一层层分类。


直接触发和确认触发区别

直接触发:点击选项后,就表示确认选择,然后关闭弹出。

确认触发:点击选项后,需要再点击确认按钮来确认选择,然后关闭弹出。

半屏

直接触发

何时使用

  • 需要从一组相关联的集合中进行多项筛选,常见于列表顶部筛选栏。
  • 在当前页面展示半屏浮层,用多级分类进行分隔。

设计指南

  • 是否需要置入默认值,初始状态是否展开所有层级。
  • 仅支持单选时,无需底部“重置/确定”按钮。

一级

直接触发

确认触发

选择完成后,需再次确认完成触发,能够减少误操作。

二级

直接触发

确认触发

何时使用

  • 需要从一组相关联的集合中进行选择。
  • 用多级分类进行分隔,支持两个层级,常用场景:行政区商圈等。

设计指南

  • 根据具体场景选择是否需要默认选项。
  • 若支持多选,选项后增加勾选框,底部增加“重置/确定”按钮。

三级

直接触发

何时使用

  • 需要从一组相关联的集合中进行选择。
  • 用多级分类进行分隔,支持三个层级,常用场景:省市区、事物分类等。

设计指南

  • 根据选项的字段长度确定展示的列数,建议 1-3 列。
  • 若支持多选,底部需增加“重置/确定”按钮。

多级

直接触发

选择完无需确认,直接触发选项结果,能够快速达到目的。

何时使用

  • 需要从一组相关联的集合中进行多项筛选,常见于列表顶部筛选栏。
  • 在当前页面展示半屏浮层,用多级分类进行分隔,常用场景:省市区、区域等。

交互规则

  • 一个页面只展示一个级别的层级。
  • 选择一个选项会自动进入下一层级,无需点击确认按钮。

设计指南

  • 是否需要设置默认值,初始状态是否展开所有层级。
  • 是否在选择列表加入全部选项。
  • 若支持多选,选项后增加多选框,并且底部增加“重置/确定”按钮.

层级区别

弹出选择

  • 在浮层中完成选择,更轻量化。
  • 浮层一般用于分类数量较少,且各层级字段长度较短的条件;若反之,建议使用单独页面承载不同层级。

页面选择

  • 页面可容纳空间更大,可直接平铺二级分类和选项内容。