Tab切换

应用范围

将至少2个相关信息展示在同一页面的解决方法,选项卡之间需并列关系,但相对独立,互不包含

Tab样式

样式一(情况一:用于Tab数可控,一行可承载)

字号:30px

字色:选中态#F63; 未选中态#333

Tab高度:88px(不算上下边线)

模块上下边线:根据控件的位置定义颜色(模块相接#d7d7d7; 模块内#e1e1e1)

#F63; 高:4px(固定); 宽:根据Tab数量均分

文字居线的中间位置

情况二:用于Tab数不可控,一行无法承载,需滑动

字号:主要信息(30px)辅助信息(28px或24px)

字色:选中态#F63; 未选中态主要信息(#333)辅助信息(#999)

Tab高度:118px(不算上下边线)

样式二

应用场景

场景一

场景二

场景三