1# TabTitleBar 2 3 4The **TabTitleBar** component is a tab title bar 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-component-general-attributes.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| 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> **NOTE** 44> 45> The input parameter cannot be **undefined**, that is, calling **TabTitleBar(undefined)** is not allowed. 46 47## TabTitleBarMenuItem 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51| Name| Type| Mandatory| Description| 52| -------- | -------- | -------- | -------- | 53| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon resource.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 54| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Symbol icon resource, which has higher priority than **value**.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 55| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Icon label.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 56| isEnabled | boolean | No| Whether to enable the item.<br> Default value: **false**<br> The value **true** means to enable the item, and **false** means the opposite.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 57| action | () => void | No| Action to perform.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 58| accessibilityLevel<sup>18+<sup> | string | No| Accessibility level. It determines whether the component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: It is treated as "yes" by the system.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 59| accessibilityText<sup>18+<sup> | ResourceStr | No| Accessibility text, that is, accessibility label name. If a component does not contain text information, it will not be announced by the screen reader when selected. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set accessibility text for components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected.<br>Default value: value of the **label** property if it is set and an empty string otherwise.<br>**Atomic service API**: This API can be used in atomic services since API version 18. | 60| accessibilityDescription<sup>18+<sup> | ResourceStr | No| Accessible description. You can provide comprehensive text explanations to help users understand the operation they are about to perform and its potential consequences, especially when these cannot be inferred from the component's attributes and accessibility text alone. If a component contains both text information and the accessible description, the text is announced first and then the accessible description, when the component is selected.<br>Default value: **"Double-tap to activate"**<br>**Atomic service API**: This API can be used in atomic services since API version 18. | 61 62## TabTitleBarTabItem 63 64**Atomic service API**: This API can be used in atomic services since API version 11. 65 66**System capability**: SystemCapability.ArkUI.ArkUI.Full 67 68| Name| Type| Mandatory| Description| 69| -------- | -------- | -------- | -------- | 70| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Text of the tab.| 71| icon | [ResourceStr](ts-types.md#resourcestr) | No| Icon of the tab.| 72| symbolStyle<sup>18+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Symbol icon of the tab, which has higher priority than **icon**.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 73 74 75## Events 76The [universal events](ts-component-general-events.md) are not supported. 77 78## Example 79 80### Example 1: Implementing a Simple Tab Title Bar 81This example demonstrates a tab title bar with tabs on the left and a menu list on the right. 82```ts 83import { TabTitleBar, promptAction, TabTitleBarTabItem, TabTitleBarMenuItem } from '@kit.ArkUI' 84 85@Entry 86@Component 87struct Index { 88 @Builder 89 // Define the pages associated with the tab list. 90 componentBuilder() { 91 Text("#1ABC9C\nTURQUOISE") 92 .fontWeight(FontWeight.Bold) 93 .fontSize(14) 94 .width("100%") 95 .textAlign(TextAlign.Center) 96 .fontColor("#CCFFFFFF") 97 .backgroundColor("#1ABC9C") 98 Text("#16A085\nGREEN SEA") 99 .fontWeight(FontWeight.Bold) 100 .fontSize(14) 101 .width("100%") 102 .textAlign(TextAlign.Center) 103 .fontColor("#CCFFFFFF") 104 .backgroundColor("#16A085") 105 Text("#2ECC71\nEMERALD") 106 .fontWeight(FontWeight.Bold) 107 .fontSize(14) 108 .width("100%") 109 .textAlign(TextAlign.Center) 110 .fontColor("#CCFFFFFF") 111 .backgroundColor("#2ECC71") 112 Text("#27AE60\nNEPHRITIS") 113 .fontWeight(FontWeight.Bold) 114 .fontSize(14) 115 .width("100%") 116 .textAlign(TextAlign.Center) 117 .fontColor("#CCFFFFFF") 118 .backgroundColor("#27AE60") 119 Text("#3498DB\nPETER RIVER") 120 .fontWeight(FontWeight.Bold) 121 .fontSize(14) 122 .width("100%") 123 .textAlign(TextAlign.Center) 124 .fontColor("#CCFFFFFF") 125 .backgroundColor("#3498DB") 126 } 127 128 // Define several tab items on the left. 129 private readonly tabItems: Array<TabTitleBarTabItem> = 130 [ 131 { title: 'Tab 1' }, 132 { title: 'Tab 2' }, 133 { title: 'Tab 3' }, 134 { title: 'icon', icon: $r('sys.media.ohos_app_icon') }, 135 { title: 'Tab 4' }, 136 ] 137 // Define several menu items on the right. 138 private readonly menuItems: Array<TabTitleBarMenuItem> = [ 139 { 140 value: $r('sys.media.ohos_save_button_filled'), 141 isEnabled: true, 142 action: () => promptAction.showToast({ message: "on item click! index 0" }) 143 }, 144 { 145 value: $r('sys.media.ohos_ic_public_copy'), 146 isEnabled: true, 147 action: () => promptAction.showToast({ message: "on item click! index 1" }) 148 }, 149 { 150 value: $r('sys.media.ohos_ic_public_edit'), 151 isEnabled: true, 152 action: () => promptAction.showToast({ message: "on item click! index 2" }) 153 }, 154 ] 155 156 // Display the tab title bar. 157 build() { 158 Row() { 159 Column() { 160 TabTitleBar({ 161 swiperContent: this.componentBuilder, 162 tabItems: this.tabItems, 163 menuItems: this.menuItems, 164 }) 165 }.width('100%') 166 }.height('100%') 167 } 168} 169``` 170 171 172 173### Example 2: Implementing Announcement for the Custom Button on the Right Side 174This example customizes the screen reader announcement text by setting the **accessibilityText**, **accessibilityDescription**, and **accessibilityLevel** properties of the custom button on the right side of the title bar. 175```ts 176import { TabTitleBar, promptAction, TabTitleBarTabItem, TabTitleBarMenuItem } from '@kit.ArkUI' 177 178@Entry 179@Component 180struct Index { 181 @Builder 182 // Define the pages associated with the tab list. 183 componentBuilder() { 184 Text("#1ABC9C\nTURQUOISE") 185 .fontWeight(FontWeight.Bold) 186 .fontSize(14) 187 .width("100%") 188 .textAlign(TextAlign.Center) 189 .fontColor("#CCFFFFFF") 190 .backgroundColor("#1ABC9C") 191 Text("#16A085\nGREEN SEA") 192 .fontWeight(FontWeight.Bold) 193 .fontSize(14) 194 .width("100%") 195 .textAlign(TextAlign.Center) 196 .fontColor("#CCFFFFFF") 197 .backgroundColor("#16A085") 198 Text("#2ECC71\nEMERALD") 199 .fontWeight(FontWeight.Bold) 200 .fontSize(14) 201 .width("100%") 202 .textAlign(TextAlign.Center) 203 .fontColor("#CCFFFFFF") 204 .backgroundColor("#2ECC71") 205 Text("#27AE60\nNEPHRITIS") 206 .fontWeight(FontWeight.Bold) 207 .fontSize(14) 208 .width("100%") 209 .textAlign(TextAlign.Center) 210 .fontColor("#CCFFFFFF") 211 .backgroundColor("#27AE60") 212 Text("#3498DB\nPETER RIVER") 213 .fontWeight(FontWeight.Bold) 214 .fontSize(14) 215 .width("100%") 216 .textAlign(TextAlign.Center) 217 .fontColor("#CCFFFFFF") 218 .backgroundColor("#3498DB") 219 } 220 221 // Define several tab items on the left. 222 private readonly tabItems: Array<TabTitleBarTabItem> = 223 [ 224 { title: 'Tab 1' }, 225 { title: 'Tab 2' }, 226 { title: 'Tab 3' }, 227 { title: 'icon', icon: $r('sys.media.ohos_app_icon') }, 228 { title: 'Tab 4' }, 229 ] 230 // Define several menu items on the right. 231 private readonly menuItems: Array<TabTitleBarMenuItem> = [ 232 { 233 value: $r('sys.media.ohos_save_button_filled'), 234 isEnabled: true, 235 action: () => promptAction.showToast({ message: "on item click! index 0" }), 236 accessibilityText: 'Save', 237 // The screen reader will not focus on this item. 238 accessibilityLevel: 'no', 239 accessibilityDescription: 'Tap to save the icon' 240 }, 241 { 242 value: $r('sys.media.ohos_ic_public_copy'), 243 isEnabled: true, 244 action: () => promptAction.showToast({ message: "on item click! index 1" }), 245 accessibilityText: 'Copy', 246 accessibilityLevel: 'yes', 247 accessibilityDescription: 'Tap to copy the icon' 248 }, 249 { 250 value: $r('sys.media.ohos_ic_public_edit'), 251 isEnabled: true, 252 action: () => promptAction.showToast({ message: "on item click! index 2" }), 253 // The screen reader will prioritize this text over the label. 254 accessibilityText: 'Edit', 255 // The screen reader can focus on this item. 256 accessibilityLevel: 'yes', 257 // The screen reader will ultimately announce this text. 258 accessibilityDescription: 'Tap to edit the icon' 259 }, 260 ] 261 262 // Display the tab title bar. 263 build() { 264 Row() { 265 Column() { 266 TabTitleBar({ 267 swiperContent: this.componentBuilder, 268 tabItems: this.tabItems, 269 menuItems: this.menuItems, 270 }) 271 }.width('100%') 272 }.height('100%') 273 } 274} 275``` 276 277 278### Example 3: Setting the Symbol Icon 279This example demonstrates how to use **symbolStyle** in **TabTitleBarTabItem** and **TabTitleBarMenuItem** to set custom symbol icons. 280```ts 281import { TabTitleBar, promptAction, TabTitleBarTabItem, TabTitleBarMenuItem, SymbolGlyphModifier } from '@kit.ArkUI' 282 283@Entry 284@Component 285struct Index { 286 @Builder 287 // Define the pages associated with the tab list. 288 componentBuilder() { 289 Text("#1ABC9C\nTURQUOISE") 290 .fontWeight(FontWeight.Bold) 291 .fontSize(14) 292 .width("100%") 293 .textAlign(TextAlign.Center) 294 .fontColor("#CCFFFFFF") 295 .backgroundColor("#1ABC9C") 296 Text("#16A085\nGREEN SEA") 297 .fontWeight(FontWeight.Bold) 298 .fontSize(14) 299 .width("100%") 300 .textAlign(TextAlign.Center) 301 .fontColor("#CCFFFFFF") 302 .backgroundColor("#16A085") 303 Text("#2ECC71\nEMERALD") 304 .fontWeight(FontWeight.Bold) 305 .fontSize(14) 306 .width("100%") 307 .textAlign(TextAlign.Center) 308 .fontColor("#CCFFFFFF") 309 .backgroundColor("#2ECC71") 310 Text("#27AE60\nNEPHRITIS") 311 .fontWeight(FontWeight.Bold) 312 .fontSize(14) 313 .width("100%") 314 .textAlign(TextAlign.Center) 315 .fontColor("#CCFFFFFF") 316 .backgroundColor("#27AE60") 317 Text("#3498DB\nPETER RIVER") 318 .fontWeight(FontWeight.Bold) 319 .fontSize(14) 320 .width("100%") 321 .textAlign(TextAlign.Center) 322 .fontColor("#CCFFFFFF") 323 .backgroundColor("#3498DB") 324 } 325 326 // Define several tab items on the left. 327 private readonly tabItems: Array<TabTitleBarTabItem> = 328 [ 329 { title: 'Tab 1' }, 330 { title: 'Tab 2' }, 331 { title: 'Tab 3' }, 332 { 333 title: 'icon', 334 icon: $r('sys.media.ohos_app_icon'), 335 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.car')) 336 }, 337 { title: 'Tab 4' }, 338 ] 339 // Define several menu items on the right. 340 private readonly menuItems: Array<TabTitleBarMenuItem> = [ 341 { 342 value: $r('sys.media.ohos_save_button_filled'), 343 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.save')), 344 isEnabled: true, 345 action: () => promptAction.showToast({ message: "on item click! index 0" }), 346 accessibilityText: 'Save', 347 // The screen reader will not focus on this item. 348 accessibilityLevel: 'no', 349 accessibilityDescription: 'Tap to save the icon' 350 }, 351 { 352 value: $r('sys.media.ohos_ic_public_copy'), 353 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.car')), 354 isEnabled: true, 355 action: () => promptAction.showToast({ message: "on item click! index 1" }), 356 accessibilityText: 'Copy', 357 accessibilityLevel: 'yes', 358 accessibilityDescription: 'Tap to copy the icon' 359 }, 360 { 361 value: $r('sys.media.ohos_ic_public_edit'), 362 symbolStyle: new SymbolGlyphModifier($r('sys.symbol.ai_edit')), 363 isEnabled: true, 364 action: () => promptAction.showToast({ message: "on item click! index 2" }), 365 // The screen reader will prioritize this text over the label. 366 accessibilityText: 'Edit', 367 // The screen reader can focus on this item. 368 accessibilityLevel: 'yes', 369 // The screen reader will ultimately announce this text. 370 accessibilityDescription: 'Tap to edit the icon' 371 }, 372 ] 373 374 // Display the tab title bar. 375 build() { 376 Row() { 377 Column() { 378 TabTitleBar({ 379 swiperContent: this.componentBuilder, 380 tabItems: this.tabItems, 381 menuItems: this.menuItems, 382 }) 383 }.width('100%') 384 }.height('100%') 385 } 386} 387``` 388 389