ZartUI Mobile · Tabs 标签页
v1.0 · 7 种变体
一、默认标签页（2 / 3 / 4 / 5 个选项）
2 个选项
选项一
选项二
3 个选项
选项一
选项二
选项三
4 个选项
选项一
选项二
选项三
选项四
5 个选项（含禁用）
选项一
选项二
选项三
选项四
选项五
二、可横滑标签页（超过 5 个，右侧箭头）
6 个选项 — 可左右滑动，右侧箭头显示更多
选项一
选项二
选项三
选项四
选项五
选项六
8 个选项 — 可左右滑动
选项一
选项二
选项三
选项四
选项五
选项六
选项七
选项八
三、带数字的标签页（括号显示数据条数）
选项后带数字计数
全部
(128)
待处理
(23)
进行中
(45)
已完成
(60)
四、有二级选项的标签页（全圆角小按钮）
二级单选（选中一个，其余取消）
推荐
最新
热榜
全部
科技
财经
体育
娱乐
教育
健康
汽车
二级多选（可同时选中多个）
筛选
排序
北京
上海
广州
深圳
杭州
成都
武汉
南京
五、二级下拉卡片（选中后下拉，一行四个）
分类
地区
排序
全部
餐饮
酒店
出行
购物
娱乐
运动
教育
医疗
金融
生活
其他
六、侧边标签页（左树 140px + 右内容）
全部商品
手机数码
电脑办公
家用电器
服饰鞋包
食品生鲜
母婴玩具
运动户外
图书文娱
热门推荐
今日特价
新品上市
品牌精选
限时秒杀
优惠券专区
会员专享
七、带徽标的标签页（红点 / 红色计数圆圈）
红点徽标 + 计数圆圈徽标
消息
通知
待办
8
我的
多徽标场景（红点 + 99+ 计数）
首页
动态
消息
99+
订单
3
Tabs 标签页规范速查表
尺寸
默认高度
44px
选中指示条
12px × 3px
侧边左栏宽度
140px
侧边选项高度
44px
二级 pill 高度
32px
下拉项高度
36px · 全圆角
徽标红点
8×8px · 红色
颜色
Tabs 背景
#F5F7FA
选中文字 (G60)
#223355
未选中文字 (G40)
#A8B4C8
禁用文字 (G30)
#CED4E0
指示条 / 激活 (DB60)
#3388FF
Pill 默认底 (G10)
#E8EDF5
单选激活 (DB60)
#3388FF 底 + #FFF 字
多选激活 (DB10+DB60)
DB10 填 + DB60 描边
徽标红色
#F26450
字体
选中标签
18px / 500
未选中标签
16px / 400
禁用标签
16px / 400
数字计数
14px / 400
二级 Pill
14px / 400（默认）· 500（激活）
侧边 / 下拉
14px / 400
徽标数字
11px / 500 · HarmonyOS Sans
←
返回组件首页