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
组件用法

选择组件最外层,可切换类型、状态、尺寸等
开关可以控制文字居中和是否配置前缀
选择器
下拉选择
选择框
下拉菜单
选择控件