ZartUI Mobile · Selector 按钮模式

v1.1.0 · 底部弹出 · 胶囊选项 · 单列 / 双列 / 三列 · 单选 / 多选

按钮模式
单列布局 · 选项全宽全圆角胶囊展示
这是标题
选项一
选项二
选项三
选项四
选项五
选项六
选项七
选项八
选项九
选项十
选项十一
按钮模式
双列布局 · 选项两列全圆角胶囊展示
这是标题
选项一
选项二
选项三
选项四
选项五
选项六
选项七
选项八
选项九
选项十
选项十一
选项十二
选项十三
选项十四
选项十五
选项十六
选项十七
选项十八
选项十九
选项二十
选项二十一
选项二十二
按钮模式
三列布局 · 选项三列全圆角胶囊展示(适合月份、年份等短文本)
这是标题
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
9月
选项一
11月
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
选项一
按钮模式 · 禁用选项
部分选项不可选时,使用 opacity 0.4 + G30 文字表示禁用
这是标题
选项一
选项二
选项三(禁用)
选项四
选项五(禁用)
选项六
选项七
选项八
按钮模式 · 多选(单列)
多选选中态:DB60 实蓝底 + G0 白色文字,可同时选中多个选项
这是标题
选项一
选项二
选项三
选项四
选项五
选项六
选项七
选项八
选项九
选项十
选项十一
按钮模式 · 多选(双列)
双列多选布局,可同时选中多个选项
这是标题
选项一
选项二
选项三
选项四
选项五
选项六
选项七
选项八
选项九
选项十
选项十一
选项十二
选项十三
选项十四
选项十五
选项十六
选项十七
选项十八
选项十九
选项二十
选项二十一
选项二十二
按钮模式 · 多选(三列)
三列多选布局,适合月份、标签等短文本多选场景
这是标题
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
整体尺寸
画板宽度414px
面板宽度100%(撑满 414px)
面板圆角12px 12px 0 0
工具栏高度56px
内容区内边距16px
底部安全区34px
选项尺寸
选项高度36px
选项圆角100px(全圆角胶囊)
选项间距8px(水平 + 垂直)
单列选项宽度382px(414 - 16×2)
双列选项宽度187px((414 - 16×2 - 8) ÷ 2)
三列选项宽度122px((414 - 16×2 - 8×2) ÷ 3)
选项样式
未选中G0 白底 + G20 描边 + G60 文字
选中(单选)DB10 浅蓝底 + DB60 描边 + DB60 文字
选中(多选)DB60 实蓝底 + DB60 描边 + G0 白色文字
字号16px / 400(未选中)· 16px / 500(选中)
禁用opacity 0.4,文字 G30
工具栏
取消16px / 400 · G50 #6B7A99
标题16px / 500 · G60 #223355 · 居中
确定16px / 500 · DB60 #3388FF
返回组件首页