HarmonyOS NEXT鸿蒙开发ArkUI：Tabs和TabContent-马育民老师

# 介绍

实现下图红框效果：

[![](https://www.malaoshi.top/upload/0/0/1GW2Mt5Y1caP.png)](https://www.malaoshi.top/upload/0/0/1GW2Mt5Y1caP.png)

# 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()
```

### 子组件
支持单个子组件。

### 属性
除支持通用属性外，还支持以下属性：

##### tabBar

设置TabBar上显示内容。

```
tabBar(value: string | Resource | CustomBuilder | { icon?: string | Resource; text?: string | Resource })
```

如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。

设置的内容超出tabbar页签时进行裁切。

# 案例

[![](https://www.malaoshi.top/upload/0/0/1GW2Mt5Y1caP.png)](https://www.malaoshi.top/upload/0/0/1GW2Mt5Y1caP.png)

```
@Entry
@Component
struct Index {

build() {
    Tabs({
      barPosition:BarPosition.End
    }){
      TabContent(){
        Text("内容-微信")
      }
      .tabBar("微信")

TabContent(){
        Text("内容-通讯录")
      }
      .tabBar("通讯录")

TabContent(){
        Text("内容-发现")
      }
      .tabBar("发现")

TabContent(){
        Text("内容-我")
      }
      .tabBar("我")
    }
  }
}
```