介绍
官方介绍：
实现下图红框效果：
基本布局
Tabs组件的页面组成包含两个部分，分别是 TabContent 和 TabBar：
- TabContent是内容页
- TabBar是导航页签栏
页面结构如下图所示：
根据不同的导航类型，布局会有区别，可以分为：
- 顶部导航（默认）
- 底部导航
- 侧边导航
Tabs
接口
创建Tabs容器。
Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})
参数：
- barPosition：
BarPosition类型，设置Tabs的页签位置。默认值：BarPosition.Start，显示在顶部
BarPosition枚举说明
Tabs页签位置枚举。
Start：
vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。End：
vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。
子组件
只能包含 TabContent
TabContent
接口
创建TabContent页签和内容。
TabContent()
提示：
不支持设置通用 宽度属性，其宽度默认撑满Tabs父组件。
不支持设置通用 高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
子组件
支持单个子组件。
属性
除支持通用属性外，还支持以下属性：
tabBar
设置TabBar上显示内容。
tabBar(value: string | Resource | CustomBuilder | { icon?: string | Resource; text?: string | Resource })
如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。
设置的内容超出tabbar页签时进行裁切。
Tabs 和 TabContent 代码关系
案例
@Entry
@Component
struct Index {
build() {
Tabs({
barPosition:BarPosition.End
}){
TabContent(){
Text("内容-微信")
}
.tabBar("微信")
TabContent(){
Text("内容-通讯录")
}
.tabBar("通讯录")
TabContent(){
Text("内容-发现")
}
.tabBar("发现")
TabContent(){
Text("内容-我")
}
.tabBar("我")
}
}
}