• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.advanced.TabTitleBar (Tab Title Bar)
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 "@ohos.arkui.advanced.TabTitleBar"
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**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35**Parameters**
36
37| Name| Type| Mandatory| Decorator| Description|
38| -------- | -------- | -------- | -------- | -------- |
39| tabItems | Array<[TabTitleBarTabItem](#tabtitlebartabitem)> | Yes| - | List of tab items on the left of the title bar.|
40| menuItems | Array<[TabTitleBarMenuItem](#tabtitlebarmenuitem)> | No| - | List of menu items on the right of the title bar.|
41| swiperContent | () => void | Yes| \@BuilderParam | Constructor for page content pertaining to the tab list.|
42
43
44## TabTitleBarMenuItem
45
46| Name| Type| Mandatory| Description|
47| -------- | -------- | -------- | -------- |
48| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon.|
49| 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.|
50| action | () =&gt; void | No| Action to perform.|
51
52
53## TabTitleBarTabItem
54
55| Name| Type| Mandatory| Description|
56| -------- | -------- | -------- | -------- |
57| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Text of the tab.|
58| icon | [ResourceStr](ts-types.md#resourcestr) | No| Icon of the tab.|
59
60
61## Events
62The [universal events](ts-universal-events-click.md) are not supported.
63
64## Example
65
66```ts
67import { TabTitleBar } from "@ohos.arkui.advanced.TabTitleBar"
68import promptAction from '@ohos.promptAction'
69
70class tabItem {
71  title: ResourceStr;
72  icon?: ResourceStr;
73  constructor(title: ResourceStr,icon?: ResourceStr) {
74    this.title = title
75    this.icon = icon
76  }
77}
78
79interface menuItem {
80  value: ResourceStr;
81  isEnabled?: boolean;
82  action?: () => void
83}
84
85@Entry
86@Component
87struct Index {
88  @Builder
89  componentBuilder() {
90    Text("#1ABC9C\nTURQUOISE")
91      .fontWeight(FontWeight.Bold)
92      .fontSize(14)
93      .width("100%")
94      .textAlign(TextAlign.Center)
95      .fontColor("#CCFFFFFF")
96      .backgroundColor("#1ABC9C")
97    Text("#16A085\nGREEN SEA")
98      .fontWeight(FontWeight.Bold)
99      .fontSize(14)
100      .width("100%")
101      .textAlign(TextAlign.Center)
102      .fontColor("#CCFFFFFF")
103      .backgroundColor("#16A085")
104    Text("#2ECC71\nEMERALD")
105      .fontWeight(FontWeight.Bold)
106      .fontSize(14)
107      .width("100%")
108      .textAlign(TextAlign.Center)
109      .fontColor("#CCFFFFFF")
110      .backgroundColor("#2ECC71")
111    Text("#27AE60\nNEPHRITIS")
112      .fontWeight(FontWeight.Bold)
113      .fontSize(14)
114      .width("100%")
115      .textAlign(TextAlign.Center)
116      .fontColor("#CCFFFFFF")
117      .backgroundColor("#27AE60")
118    Text("#3498DB\nPETER RIVER")
119      .fontWeight(FontWeight.Bold)
120      .fontSize(14)
121      .width("100%")
122      .textAlign(TextAlign.Center)
123      .fontColor("#CCFFFFFF")
124      .backgroundColor("#3498DB")
125  }
126
127  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')]
128  private  readonly menuItems: Array<menuItem> = [
129    {
130      value: $r('app.media.ic_public_reduce'),
131      isEnabled: true,
132      action: () => promptAction.showToast({ message: "on item click! index 0" })
133    },
134    {
135      value: $r('app.media.ic_public_edit'),
136      isEnabled: true,
137      action: () => promptAction.showToast({ message: "on item click! index 1" })
138    },
139    {
140      value: $r('app.media.ic_public_save'),
141      isEnabled: true,
142      action: () => promptAction.showToast({ message: "on item click! index 2" })
143    },
144  ]
145
146  build() {
147    Row() {
148      Column() {
149        TabTitleBar({
150          swiperContent: this.componentBuilder,
151          tabItems: this.tabItems,
152          menuItems: this.menuItems,
153        })
154      }.width('100%')
155    }.height('100%')
156  }
157}
158```
159
160![en-us_image_0000001616916278](figures/en-us_image_0000001616916278.png)
161