场景:多个独立功能或者页面嵌入到一张页面中,通过标签页切换显示
Demo:标签页案例
基本操作
标签外观
默认采用简约外观
![Alt text](/assets/images/image-3373bf4d397fb777b2a188577583fdd6.png)
![Alt text](/assets/images/image-1-e43c8a7a392b746edb36eb1fc8849b53.png)
标签位置
默认标签位于上部
![Alt text](/assets/images/image-2-47bc545d6f1613ef1565920eb55f6e42.png)
标签居中
![Alt text](/assets/images/image-3-0f83a6171fc63bad6fc7ff3ebd65545e.png)
标签配置
![Alt text](/assets/images/image-4-1484d9e421a1de57d716959800118b30.png)
![Alt text](/assets/images/image-5-befe7457a9d35ab3629aababdbcfdb1a.png)
提示内容
![Alt text](/assets/images/image-6-01006f0c2f294671c7ea6fbe06910996.png)
说明:提示内容在标签页运行时鼠标移入时显示
- 显示:标签切入(内容显示)时触发执行
- 隐藏:标签切走(内容隐藏)时触发执行
![Alt text](/assets/images/image-7-4ad513e6ff9b7263ecbadface7d63177.png)
逻辑编排
设置默认激活标签
![Alt text](/assets/images/image-8-912209a45941cb37c0321f5716ce210d.png)
使用:传入标签序号,默认从0开始
标签点击事件
![Alt text](/assets/images/image-9-b5d09353b085ec04fdfe0aef04444af9.png)
点击标签页时触发执行,并获取当前点击标签信息
聚焦到标签页组件,在样式catelog面板中可以设置标签默认样式,包括标题文本样式,背景色,选中条背景色,边框等
默认样式
![Alt text](/assets/images/image-10-a46fa80672af5d079438cffd509718f3.png)
选中样式
![Alt text](/assets/images/image-11-dbfdb65f520429cafaae2402f18be3a0.png)