选择器 Pickers

概述

选择器包括一个或多个不同值的可滚动列表,每个值可以在视图的中心以较暗的文本形式显示。当用户正在编辑字段或点击菜单时,选择器通常会显示在屏幕底部。

类型

单项选择

image.png

筛选

image.png

类型细节规范

单项选择器

image.png

场景描述:适用于在列表等组件中进行内容选择的场景。太多的选项内容不适合使用选择器,建议进入单独页面,例如联系人选择和城市选择。

规范描述:1.选项最少2项2.选项文字长度不超过一行,超过自动截断

单项筛选

image.png

场景描述:适用于大量内容进行分类筛选过滤的场景。

规范描述:1.点击某个选项,自动对内容进行筛选,筛选面板收回2.筛选面板定义有最小高度和最大高度3.单个筛选项定义有最大宽度

多项筛选

image.png

场景描述:适用于大量内容进行分类筛选过滤的场景。

规范描述:1.点击选项后筛选结果实时变化,面板不收回2.点击重置后结果实时变化,面板不收回3.点击筛选和确定后面板收回4.筛选面板定义有最小高度和最大高度5.单个筛选项定义有最大宽度6.至少要有一个筛选结果

安卓化

在android中单项选择器有区别于ios系统的样式

image.png

当用户在安卓系统中激活选择器后出现选择器弹窗,用户可以选择后确定提交选择结果