Tabs 标签页
用于承载同一层级下不同页面或类别的组件,方便用户在同一个页面框架下进行快速切换。
开发说明
基础标签
使用选项卡切换内容模块,操作后不会进行页面跳转。
图标标签
在基础选项卡基础上,在每个标签前添加图标,方便用户快速理解。
不同方向
横向、竖向。
不同尺寸
中-48px、小-40px(默认)两种尺寸。
基础页签
另一种样式的页签,不提供对应的垂直样式。
增删页签
用户可添加、删除页签,满足自定义场景。
交互状态
当标签项目处于活动状态时,容器将显示该选项卡的内容。一个选项卡组中只能有一个选项卡项处于活动状态。
何时使用
- 当内容过多时需要将不同类型内容进行扁平化收纳。
搭配指南
- 可根据实际使用情况(空间有限,或有特殊诉求的场景等),在内容模块的上下左右不同位置放置选项卡。
- 不同层级的类型搭配使用,可以更好区分不同主次内容的层级。
- 当标签过多无法在一行展示完整时,不要让选项卡换行,可以考虑使用滑动展示。
- 切换选项卡时在同一页面内进行,建议不要跳转新启页面。