Select 选择器

当用户需要从一组同类数据中选择一个或多个时,可以使用下拉选择器,点击后选择对应项。

何时使用

弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。

当选项少时(少于 3 项),建议直接将选项平铺,使用 Radio 是更好的选择。

基础选择框

选择框分为2类:

下箭头选择框-点击出下拉菜单或者弹窗

右箭头选择框-点击直接跳转页面

Defult

下箭头

Defult

右箭头

选择框尺寸

有Large、Defult、Small、Mini四种不同高度、宽度的选择框,以适应不同尺寸布局。

Defult

Large:48px

Defult

Defult:40px

Defult

Small:32px

Defult

Mini:24px

选择框状态

选择框有3种状态:默认、已选择、置灰

Defult

Default

Filled

Filled

Disable

Disable

特殊选择框

复杂的场景,例如交易页:

选择框可配置左侧可配置icon

选择框的文字可居中展示

Defult

Defult

点击热区

基础类型选择框点击全部区域都可生效

带icon的选择框类型icon区域要单独设置热区

基础类型

Defult

全部区域可点击

带icon

Defult

图标热区

下拉热区

使用场景

下箭头选择框-点击出下拉菜单或者弹窗

右箭头选择框-点击直接跳转页面

请不要乱搭配使用,例如右箭头的选择框点击出弹窗或下箭头的选择框点击出页面

1.点击选择框出下拉菜单

3.点击选择框跳转新页面

2.点击选择框出弹窗

推荐/慎用示例

选择框内的文字超长时换行,不要直接用省略号

文字最多展示2行,极端情况超出2行显示”...”

Do

Don’t

0x5c09a203ba6943c3eba4c8d6c825a8d8...

0x5c09a203ba6943c3eba4c8d6c825a8d882d09

每个尺寸下的选择框两侧都有设定好的间距,不能随意调整间距

Do

Defult

Don’t

Defult

To Designer

组件用法

选择组件最外层,可切换类型、状态、尺寸等

开关可以控制文字居中和是否配置前缀



选择器
下拉选择
选择框
下拉菜单
选择控件

DESIGN

中文