1# TabTitleBar
2
3
4页签型标题栏，用于页面之间的切换；仅一级页面适用。
5
6
7> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
9
10
11## 导入模块
12
13```
14import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar"
15```
16
17
18## 子组件
19
20无
21
22
23## 接口
24
25TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void})
26
27**装饰器类型：**\@Component
28
29**系统能力：** SystemCapability.ArkUI.ArkUI.Full
30
31**参数：**
32
33| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 |
34| -------- | -------- | -------- | -------- | -------- |
35| tabItems | Array<[TabTitleBarTabItem](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-tabtitlebar.md/#tabtitlebartabitem)> | 是 | - | 左侧页签项目列表，定义标题栏左侧的页签项目。 |
36| menuItems | Array<[TabTitleBarMenuItem](https://gitee.com/openharmony-sig/arkui_advanced_ui_component/blob/master/doc/ts-composite-components-tabtitlebar.md/#tabtitlebarmenuitem)> | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目 |
37| swiperContent | () => void | 否 | \@BuilderParam | 页签列表关联的页面内容构造器 |
38
39
40### TabTitleBarMenuItem
41
42| 名称 | 值 | 是否必填 | 描述 |
43| -------- | -------- | -------- | -------- |
44| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 图标资源 |
45| isEnabled | boolean | 是 | 是否启用 |
46| action | () => void | 否 | 触发时的动作闭包 |
47
48
49### TabTitleBarTabItem
50
51| 名称 | 值 | 是否必填 | 描述 |
52| -------- | -------- | -------- | -------- |
53| title | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 文字页签 |
54| icon | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 否 | 图片页签资源 |
55
56
57## 示例
58
59```
60import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar"
61import Prompt from '@system.prompt'
62
63@Entry
64@Component
65struct Index {
66  @Builder componentBuilder() {
67    Text("#1ABC9C\nTURQUOISE")
68      .fontWeight(FontWeight.Bold)
69      .fontSize(14)
70      .width("100%")
71      .textAlign(TextAlign.Center)
72      .fontColor("#CCFFFFFF")
73      .backgroundColor("#1ABC9C")
74    Text("#16A085\nGREEN SEA")
75      .fontWeight(FontWeight.Bold)
76      .fontSize(14)
77      .width("100%")
78      .textAlign(TextAlign.Center)
79      .fontColor("#CCFFFFFF")
80      .backgroundColor("#16A085")
81    Text("#2ECC71\nEMERALD")
82      .fontWeight(FontWeight.Bold)
83      .fontSize(14)
84      .width("100%")
85      .textAlign(TextAlign.Center)
86      .fontColor("#CCFFFFFF")
87      .backgroundColor("#2ECC71")
88    Text("#27AE60\nNEPHRITIS")
89      .fontWeight(FontWeight.Bold)
90      .fontSize(14)
91      .width("100%")
92      .textAlign(TextAlign.Center)
93      .fontColor("#CCFFFFFF")
94      .backgroundColor("#27AE60")
95  }
96  private readonly tabItems: { title: ResourceStr, icon?: ResourceStr }[] =
97    [ { title: "页签1" },
98      { title: "页签2" },
99      { title: "页签3" },
100      { title: "Happy",
101        icon: $r('app.media.emoji_happy') } ]
102  private readonly menuItems: { value: Resource, isEnabled: boolean, action: () => void }[] =
103    [ { isEnabled: true, value: $r('app.media.ic_public_reduce'),
104        action: () => Prompt.showToast({ message: "on item click! index 0" })
105      },
106      { isEnabled: true, value: $r('app.media.ic_public_edit'),
107        action: () => Prompt.showToast({ message: "on item click! index 1" })
108      },
109      { isEnabled: true, value: $r('app.media.ic_public_save'),
110        action: () => Prompt.showToast({ message: "on item click! index 2" })
111      } ]
112  build() {
113    Row() {
114      Column() {
115        TabTitleBar({
116          swiperContent: this.componentBuilder,
117          tabItems: this.tabItems,
118          menuItems: this.menuItems,
119        })
120      }.width('100%')
121    }.height('100%')
122  }
123}
124```
125
126![zh-cn_image_0000001616916278](figures/zh-cn_image_0000001616916278.png)
127