1# TabTitleBar
2
3
4页签型标题栏，用于页面之间的切换。仅一级页面适用。
5
6
7> **说明：**
8>
9> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
10
11
12## 导入模块
13
14```
15import { TabTitleBar } from '@kit.ArkUI'
16```
17
18
19## 子组件
20
21无
22
23## 属性
24不支持[通用属性](ts-universal-attributes-size.md)
25
26
27## TabTitleBar
28
29TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void})
30
31**装饰器类型：**\@Component
32
33**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
34
35**系统能力：** SystemCapability.ArkUI.ArkUI.Full
36
37| 名称 | 类型 | 必填 | 装饰器类型 | 说明 |
38| -------- | -------- | -------- | -------- | -------- |
39| tabItems | Array<[TabTitleBarTabItem](#tabtitlebartabitem)> | 是 | - | 左侧页签项目列表，定义标题栏左侧的页签项目。 |
40| menuItems | Array<[TabTitleBarMenuItem](#tabtitlebarmenuitem)> | 否 | - | 右侧菜单项目列表，定义标题栏右侧的菜单项目。 |
41| swiperContent | () => void | 是 | \@BuilderParam | 页签列表关联的页面内容构造器。 |
42
43> **说明：**
44>
45> 入参对象不可为undefined，即`TabTitleBar(undefined)`。
46
47## TabTitleBarMenuItem
48
49**系统能力：** SystemCapability.ArkUI.ArkUI.Full
50
51| 名称 | 类型 | 必填 | 说明 |
52| -------- | -------- | -------- | -------- |
53| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 图标资源。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
54| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标标签描述。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 |
55| isEnabled | boolean | 否 | 是否启用。默认禁用。true：启用，false：禁用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
56| action | ()&nbsp;=&gt;&nbsp;void | 否 | 触发时的动作闭包。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
57
58## TabTitleBarTabItem
59
60**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
61
62**系统能力：** SystemCapability.ArkUI.ArkUI.Full
63
64| 名称 | 类型 | 必填 | 说明 |
65| -------- | -------- | -------- | -------- |
66| title | [ResourceStr](ts-types.md#resourcestr) | 是 | 文字页签。 |
67| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图片页签资源。 |
68
69
70## 事件
71不支持[通用事件](ts-universal-events-click.md)
72
73## 示例
74
75该示例实现了带有左侧页签和右侧菜单列表的页签型标题栏。
76
77```ts
78import { TabTitleBar, promptAction, TabTitleBarTabItem, TabTitleBarMenuItem } from '@kit.ArkUI'
79
80@Entry
81@Component
82struct Index {
83  @Builder
84  //定义页签列表关联的页面
85  componentBuilder() {
86    Text("#1ABC9C\nTURQUOISE")
87      .fontWeight(FontWeight.Bold)
88      .fontSize(14)
89      .width("100%")
90      .textAlign(TextAlign.Center)
91      .fontColor("#CCFFFFFF")
92      .backgroundColor("#1ABC9C")
93    Text("#16A085\nGREEN SEA")
94      .fontWeight(FontWeight.Bold)
95      .fontSize(14)
96      .width("100%")
97      .textAlign(TextAlign.Center)
98      .fontColor("#CCFFFFFF")
99      .backgroundColor("#16A085")
100    Text("#2ECC71\nEMERALD")
101      .fontWeight(FontWeight.Bold)
102      .fontSize(14)
103      .width("100%")
104      .textAlign(TextAlign.Center)
105      .fontColor("#CCFFFFFF")
106      .backgroundColor("#2ECC71")
107    Text("#27AE60\nNEPHRITIS")
108      .fontWeight(FontWeight.Bold)
109      .fontSize(14)
110      .width("100%")
111      .textAlign(TextAlign.Center)
112      .fontColor("#CCFFFFFF")
113      .backgroundColor("#27AE60")
114    Text("#3498DB\nPETER RIVER")
115      .fontWeight(FontWeight.Bold)
116      .fontSize(14)
117      .width("100%")
118      .textAlign(TextAlign.Center)
119      .fontColor("#CCFFFFFF")
120      .backgroundColor("#3498DB")
121  }
122
123  //定义几个左侧的页签项目
124  private readonly tabItems: Array<TabTitleBarTabItem> =
125    [
126      { title: '页签1' },
127      { title: '页签2' },
128      { title: '页签3' },
129      { title: 'icon', icon: $r('sys.media.ohos_app_icon') },
130      { title: '页签4' },
131    ]
132  //定义几个右侧的菜单项目
133  private readonly menuItems: Array<TabTitleBarMenuItem> = [
134    {
135      value: $r('sys.media.ohos_save_button_filled'),
136      isEnabled: true,
137      action: () => promptAction.showToast({ message: "on item click! index 0" })
138    },
139    {
140      value: $r('sys.media.ohos_ic_public_copy'),
141      isEnabled: true,
142      action: () => promptAction.showToast({ message: "on item click! index 1" })
143    },
144    {
145      value: $r('sys.media.ohos_ic_public_edit'),
146      isEnabled: true,
147      action: () => promptAction.showToast({ message: "on item click! index 2" })
148    },
149  ]
150
151  //TabTitleBar效果展示
152  build() {
153    Row() {
154      Column() {
155        TabTitleBar({
156          swiperContent: this.componentBuilder,
157          tabItems: this.tabItems,
158          menuItems: this.menuItems,
159        })
160      }.width('100%')
161    }.height('100%')
162  }
163}
164```
165
166![zh-cn_image_tabtitlebar_example01](figures/zh-cn_image_tabtitlebar_example01.png)