1# TabTitleBar
2
3
4The tab title bar is used to switch between tabs pages. It is applicable only to level-1 pages.
5
6
7> **NOTE**
8>
9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Modules to Import
13
14```
15import { TabTitleBar } from '@kit.ArkUI'
16```
17
18
19## Child Components
20
21Not supported
22
23## Attributes
24The [universal attributes](ts-universal-attributes-size.md) are not supported.
25
26
27## TabTitleBar
28
29TabTitleBar({tabItems: Array<TabTitleBarTabItem>, menuItems?: Array<TabTitleBarMenuItem>, swiperContent: () => void})
30
31**Decorator**: @Component
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39| Name| Type| Mandatory| Decorator| Description|
40| -------- | -------- | -------- | -------- | -------- |
41| tabItems | Array<[TabTitleBarTabItem](#tabtitlebartabitem)> | Yes| - | List of tab items on the left of the title bar.|
42| menuItems | Array<[TabTitleBarMenuItem](#tabtitlebarmenuitem)> | No| - | List of menu items on the right of the title bar.|
43| swiperContent | () => void | Yes| \@BuilderParam | Constructor for page content pertaining to the tab list.|
44
45## TabTitleBarMenuItem
46
47**Atomic service API**: This API can be used in atomic services since API version 11.
48
49| Name| Type| Mandatory| Description|
50| -------- | -------- | -------- | -------- |
51| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon resource.|
52| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Icon label.|
53| isEnabled | boolean | No| Whether to enable the item.<br> Default value: **true**<br> The value **true** means to enable the item, and **false** means the opposite.|
54| action | () =&gt; void | No| Action to perform.|
55
56## TabTitleBarTabItem
57
58**Atomic service API**: This API can be used in atomic services since API version 11.
59
60| Name| Type| Mandatory| Description|
61| -------- | -------- | -------- | -------- |
62| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Text of the tab.|
63| icon | [ResourceStr](ts-types.md#resourcestr) | No| Icon of the tab.|
64
65
66## Events
67The [universal events](ts-universal-events-click.md) are not supported.
68
69## Example
70
71```ts
72import { TabTitleBar, promptAction } from '@kit.ArkUI'
73
74class tabItem {
75  title: ResourceStr;
76  icon?: ResourceStr;
77  constructor(title: ResourceStr,icon?: ResourceStr) {
78    this.title = title
79    this.icon = icon
80  }
81}
82
83interface menuItem {
84  value: ResourceStr;
85  isEnabled?: boolean;
86  action?: () => void
87}
88
89@Entry
90@Component
91struct Index {
92  @Builder
93  componentBuilder() {
94    Text("#1ABC9C\nTURQUOISE")
95      .fontWeight(FontWeight.Bold)
96      .fontSize(14)
97      .width("100%")
98      .textAlign(TextAlign.Center)
99      .fontColor("#CCFFFFFF")
100      .backgroundColor("#1ABC9C")
101    Text("#16A085\nGREEN SEA")
102      .fontWeight(FontWeight.Bold)
103      .fontSize(14)
104      .width("100%")
105      .textAlign(TextAlign.Center)
106      .fontColor("#CCFFFFFF")
107      .backgroundColor("#16A085")
108    Text("#2ECC71\nEMERALD")
109      .fontWeight(FontWeight.Bold)
110      .fontSize(14)
111      .width("100%")
112      .textAlign(TextAlign.Center)
113      .fontColor("#CCFFFFFF")
114      .backgroundColor("#2ECC71")
115    Text("#27AE60\nNEPHRITIS")
116      .fontWeight(FontWeight.Bold)
117      .fontSize(14)
118      .width("100%")
119      .textAlign(TextAlign.Center)
120      .fontColor("#CCFFFFFF")
121      .backgroundColor("#27AE60")
122    Text("#3498DB\nPETER RIVER")
123      .fontWeight(FontWeight.Bold)
124      .fontSize(14)
125      .width("100%")
126      .textAlign(TextAlign.Center)
127      .fontColor("#CCFFFFFF")
128      .backgroundColor("#3498DB")
129  }
130
131  private readonly tabItems: Array<tabItem> = [new tabItem('Tab 1'),new tabItem('Tab 2'),new tabItem('Tab 3'),new tabItem("Happy",$r('app.media.emoji_happy')),new tabItem('Tab 4')]
132  private  readonly menuItems: Array<menuItem> = [
133    {
134      value: $r('app.media.ic_public_reduce'),
135      isEnabled: true,
136      action: () => promptAction.showToast({ message: "on item click! index 0" })
137    },
138    {
139      value: $r('app.media.ic_public_edit'),
140      isEnabled: true,
141      action: () => promptAction.showToast({ message: "on item click! index 1" })
142    },
143    {
144      value: $r('app.media.ic_public_save'),
145      isEnabled: true,
146      action: () => promptAction.showToast({ message: "on item click! index 2" })
147    },
148  ]
149
150  build() {
151    Row() {
152      Column() {
153        TabTitleBar({
154          swiperContent: this.componentBuilder,
155          tabItems: this.tabItems,
156          menuItems: this.menuItems,
157        })
158      }.width('100%')
159    }.height('100%')
160  }
161}
162```
163
164![en-us_image_0000001616916278](figures/en-us_image_0000001616916278.png)
165