Segmented Control 分段控制器
点击切换选项的筛选器,用于切换页面中的内容和功能
构成
Lable
Lable
Lable
1
2
3
1: 选项卡
支持纯文字,纯图标,图标+文字的组合,点击后选项卡滑动切换,支持业务自定义样式
2: 容器
默认固定宽度,也可根据父容器自适应宽度,高度默认两个预设高度,支持业务自定义样式
3: 涨跌色
默认提供涨跌色类型
变体/类型
默认:
40高
Lable
Lable
Lable
Lable
32高
Lable
Lable
Lable
Lable
24高
Lable
Lable
Lable
Lable
涨跌:
40高
Lable
Lable
32高
Lable
Lable
24高
Lable
Lable
使用场景
Modal Title
Lable
Lable
❖
Replace me
Secondary
Primary
用于展示多个选项并允许用户选择其中单个选项;
当切换选中选项时,关联区域的内容会发生变化;
Segmented不同于tabs,它往往支持的是更少的同类维度的筛选,一般为5个以内,而tabs能提供更多选项,且更适于支持不同类维度的筛选
标注
默认固定宽度:
选项卡支持纯文字,纯图标,图标+文字三种组合,也支持业务自定义内容:
选项卡禁用:
自适应宽度:
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
❖
❖
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
Lable
涨跌:
24
32
12
12
2
2
2
2
4
40
标注说明:
文案 14 Medium
icon 16*16px
多语言适配
优先精简文案,建议最多16个字符,若宽度固定且超长,则省略
CrossCrossCrossC
Isolated
CrossCrossCrossC
Isolated
CrossCrossCrossCCr…
Isolated
RTL
Cross
Isolated
LTR
معزول
متبادل
RTL
用法
Cross
Isolated
Lable
Lable
正确
Isolated
Lable
错误
不要混合使用文本和图标在组件内
分段控制器
分段选择
切换器
选项切换
选择控件