1# TabContent 2 3The **TabContent** component is used only in the **Tabs** component. It corresponds to the content view of a switched tab page. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12This component supports only one child component. 13 14> **NOTE** 15> 16> Built-in components and custom components are allowed, with support for ([if/else](../../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control. 17 18 19## APIs 20 21TabContent() 22 23**Atomic service API**: This API can be used in atomic services since API version 11. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27## Attributes 28 29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 30 31### tabBar 32 33tabBar(value: string | Resource | CustomBuilder | { icon?: string | Resource; text?: string | Resource }) 34 35Sets the content displayed on the tab bar. 36 37If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image. 38 39If the content set exceeds the space provided by the tab bar, it will be clipped. 40 41**Atomic service API**: This API can be used in atomic services since API version 11. 42 43**System capability**: SystemCapability.ArkUI.ArkUI.Full 44 45**Parameters** 46 47| Name| Type| Mandatory| Description| 48| -------- | -------- | -------- | -------- | 49| value | string \| [Resource](ts-types.md#resource) \|<br>[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>\| {<br>icon?: string \| [Resource](ts-types.md#resource),<br>text?: string \| [Resource](ts-types.md#resource)<br>} | Yes| Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).| 50 51### tabBar<sup>9+</sup> 52 53tabBar(value: SubTabBarStyle | BottomTabBarStyle) 54 55Sets the content displayed on the tab bar. The bottom tab style does not include an indicator. When an icon display error occurs, a gray blank block is displayed. 56 57**Atomic service API**: This API can be used in atomic services since API version 11. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61**Parameters** 62 63| Name| Type | Mandatory| Description | 64| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 65| value | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9)| Yes | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style<br>**BottomTabBarStyle**: bottom and side tab style| 66 67> **NOTE** 68> 69> - The **TabContent** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **Tabs** component. 70> - The **TabContent** component does not support setting of the universal height attribute. Its height is determined by the height of the parent **Tabs** component and the **TabBar** component. 71> - If the **vertical** attribute is **false**, the width and height descriptions are swapped in the preceding two restrictions. 72> - **TabContent** does not support page scrolling. If page scrolling is required, consider nesting a list. 73 74## SubTabBarStyle<sup>9+</sup> 75 76Implements the subtab style. When this attribute is enabled, the transition animation is played when the user switches between tabs. 77 78### constructor 79 80constructor(content: ResourceStr) 81 82Constructor used to create a **SubTabBarStyle** instance. 83 84**Atomic service API**: This API can be used in atomic services since API version 11. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88**Parameters** 89 90| Name| Type | Mandatory| Description| 91| -------- | -------- | -------- | -------- | 92| content | [ResourceStr](ts-types.md#resourcestr) | Yes| Text for the tab.| 93 94### constructor<sup>12+</sup> 95 96constructor(content: ResourceStr | ComponentContent) 97 98Constructor used to create a **SubTabBarStyle** instance. You can set custom content with **ComponentContent**. 99 100**Atomic service API**: This API can be used in atomic services since API version 12. 101 102**System capability**: SystemCapability.ArkUI.ArkUI.Full 103 104**Parameters** 105 106| Name| Type | Mandatory| Description| 107| -------- | -------- | -------- | -------- | 108| content | [ResourceStr](ts-types.md#resourcestr) \| [ComponentContent](../js-apis-arkui-ComponentContent.md) | Yes| Content on the tab.<br>**NOTE**<br>1. Custom content does not support the **labelStyle** attribute.<br>2. If the custom content exceeds the content box of the tab page, the excess part is not displayed.<br>3. If the custom content is within the content box of the tab page, it is aligned in the center.<br>4. If the custom content is abnormal or no display component is available, a blank area is displayed.| 109 110### of<sup>10+</sup> 111 112static of(content: ResourceStr): SubTabBarStyle 113 114Static constructor used to create a **SubTabBarStyle** instance. 115 116**Atomic service API**: This API can be used in atomic services since API version 11. 117 118**System capability**: SystemCapability.ArkUI.ArkUI.Full 119 120**Parameters** 121 122| Name | Type | Mandatory| Description | 123| ------- | ------------------------------------------ | ---- | ------------------ | 124| content | [ResourceStr](ts-types.md#resourcestr) | Yes | Text for the tab.| 125 126**Return value** 127 128| Type | Description | 129| ------- | ------------------------------------------------------------ | 130| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object created.| 131 132### of<sup>12+</sup> 133 134static of(content: ResourceStr | ComponentContent): SubTabBarStyle 135 136Static constructor used to create a **SubTabBarStyle** instance. 137 138**Atomic service API**: This API can be used in atomic services since API version 12. 139 140**System capability**: SystemCapability.ArkUI.ArkUI.Full 141 142**Parameters** 143 144| Name | Type | Mandatory| Description | 145| ------- | ------------------------------------------ | ---- | ------------------ | 146| content | [ResourceStr](ts-types.md#resourcestr) \| [ComponentContent](../js-apis-arkui-ComponentContent.md) | Yes | Content on the tab. You can set custom content with **ComponentContent**.<br>**NOTE**<br>1. Custom content does not support the **labelStyle** attribute.<br>2. If the custom content exceeds the content box of the tab page, the excess part is not displayed.<br>3. If the custom content is within the content box of the tab page, it is aligned in the center.<br>4. If the custom content is abnormal or no display component is available, a blank area is displayed.| 147 148**Return value** 149 150| Type | Description | 151| ------- | ------------------------------------------------------------ | 152| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object created.| 153 154### Attributes 155 156The following attributes are supported. 157 158**System capability**: SystemCapability.ArkUI.ArkUI.Full 159 160| Name | Type | Mandatory| Description | 161| ----------- | ----------------- | ---- |---------------------------------------- | 162| indicator<sup>10+</sup> | [IndicatorStyle](#indicatorstyle10)| Yes| Indicator style of the selected subtab. It takes effect only in the horizontal layout.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 163| selectedMode<sup>10+</sup> | [SelectedMode](#selectedmode10) | Yes| Display mode of the selected subtab. It takes effect only in the horizontal layout.<br>Default value: **SelectedMode.INDICATOR**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 164| board<sup>10+</sup> | [BoardStyle](#boardstyle10) | Yes| Board style of the selected subtab. It takes effect only in the horizontal layout.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 165| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10) | Yes| Label text and font of the subtab.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 166| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | Yes| Padding of the subtab. It cannot be set in percentage. When the parameter is of the Dimension type, the value applies to all sides.<br>Default value: **{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp}**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 167| padding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | Yes| Padding of the subtab. The mirroring capability is supported (percentage values are not allowed).<br>Default value: {start:LengthMetircs.vp(8),end:LengthMetircs.vp(8),<br>top:LengthMetircs.vp(17),bottom:LengthMetircs.vp(18)}<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 168| id<sup>11+</sup> | string | Yes| [ID](ts-universal-attributes-component-id.md#attributes) of the subtab.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 169 170## IndicatorStyle<sup>10+</sup> 171 172**Atomic service API**: This API can be used in atomic services since API version 11. 173 174**System capability**: SystemCapability.ArkUI.ArkUI.Full 175 176| Name| Type| Mandatory| Description| 177| -------- | -------- | -------- | -------------------------------- | 178| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the indicator and board.<br>Default value: **#FF007DFF**| 179| height | [Length](ts-types.md#length) | No| Height of the indicator. It cannot be set in percentage.<br>Default value: **2.0**<br>Unit: vp| 180| width | [Length](ts-types.md#length) | No| Width of the indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp<br>**NOTE**<br>If this parameter is set to **0**, the tab text width will be used instead.| 181| borderRadius | [Length](ts-types.md#length) | No| Rounded corner radius of the indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp| 182| marginTop | [Length](ts-types.md#length) | No| Spacing between the indicator and text. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp| 183 184## SelectedMode<sup>10+</sup> 185 186**Atomic service API**: This API can be used in atomic services since API version 11. 187 188**System capability**: SystemCapability.ArkUI.ArkUI.Full 189 190| Name | Description | 191| ---------- | ------------------------ | 192| INDICATOR | Indicator mode. | 193| BOARD | Board mode. | 194 195## BoardStyle<sup>10+</sup> 196 197**Atomic service API**: This API can be used in atomic services since API version 11. 198 199**System capability**: SystemCapability.ArkUI.ArkUI.Full 200 201| Name| Type| Mandatory| Description| 202| -------- | -------- | -------- | ------------------------------------ | 203| borderRadius | [Length](ts-types.md#length) | No| Rounded corner radius of the board. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp| 204 205## LabelStyle<sup>10+</sup> 206 207**System capability**: SystemCapability.ArkUI.ArkUI.Full 208 209| Name | Type | Mandatory| Description | 210| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 211| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. By default, an ellipsis (...) is used to represent text overflow.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 212| maxLines | number | No | Maximum number of lines in the label text. If this attribute is specified, the text will not exceed the specified number of lines. You can use **textOverflow** to specify how to represent text overflow. Default value: **1**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 213| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. It cannot be set in percentage. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings. When the adaptive text size is set, **font.size** does not take effect. Default value: **0.0fp**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 214| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. It cannot be set in percentage. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings. When the adaptive text size is set, **font.size** does not take effect. Default value: **0.0fp**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 215| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text. By default, the **maxLines** settings are prioritized.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 216| font | [Font](ts-types.md#font) | No | Font of the label text.<br>When the tab is a subtab, the default font is in 16.0 fp size, 'HarmonyOS Sans' family, and normal font style and weight.<br>When the tab is a bottom tab, the default font is in 10.0 fp size, 'HarmonyOS Sans' family, normal font style, and medium weight.<br>The default font size of the bottom tab page is 12.0 fp since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 217| unselectedColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the label text when it is not selected.<br>Default value: **#99182431**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 218| selectedColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the label text when it is selected.<br>Default value: **#FF007DFF**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 219 220## BottomTabBarStyle<sup>9+</sup> 221 222Implements the bottom and side tab style. 223 224### constructor 225 226constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr) 227 228A constructor used to create a **BottomTabBarStyle** instance. 229 230**Atomic service API**: This API can be used in atomic services since API version 11. 231 232**System capability**: SystemCapability.ArkUI.ArkUI.Full 233 234**Parameters** 235 236| Name| Type | Mandatory| Description| 237| -------- | -------- | -------- | -------- | 238| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12)| Yes| Image for the tab.| 239| text | [ResourceStr](ts-types.md#resourcestr) | Yes| Text for the tab.| 240 241### of<sup>10+</sup> 242 243static of(icon: ResourceStr | TabBarSymbol, text: ResourceStr): BottomTabBarStyle 244 245Static constructor used to create a **BottomTabBarStyle** instance. 246 247**Atomic service API**: This API can be used in atomic services since API version 11. 248 249**System capability**: SystemCapability.ArkUI.ArkUI.Full 250 251**Parameters** 252 253| Name| Type | Mandatory| Description| 254| -------- | -------- | -------- | -------- | 255| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12)| Yes| Image for the tab.| 256| text | [ResourceStr](ts-types.md#resourcestr) | Yes| Text for the tab.| 257 258**Return value** 259 260| Type | Description | 261| ------- | ------------------------------------------------------------ | 262| [BottomTabBarStyle](#bottomtabbarstyle9)| **BottomTabBarStyle** object created.| 263 264### Attributes 265 266The following attributes are supported. 267 268**System capability**: SystemCapability.ArkUI.ArkUI.Full 269 270| Name | Type | Mandatory| Description | 271| ------------ | ---------------------------- | ---- |----------------------------------- | 272| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) \| [LocalizedPadding<sup>12+</sup>](ts-types.md#localizedpadding12) | Yes| Padding of the bottom tab. It cannot be set in percentage. When the parameter is of the Dimension type, the value applies to all sides.<br>Default value: **{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp}**<br>If of the LocalizedPadding type, this attribute supports the mirroring capability.<br>Default value: {start:LengthMetircs.vp(4),end:LengthMetircs.vp(4),<br>top:LengthMetircs.vp(0),bottom:LengthMetircs.vp(0)}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 273| verticalAlign<sup>10+</sup> | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Yes| Vertical alignment mode of the images and text on the bottom tab.<br>Default value: **VerticalAlign.Center**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 274| layoutMode<sup>10+</sup> | [LayoutMode](#layoutmode10) | Yes| Layout of the images and text on the bottom tab. For details, see **LayoutMode**.<br>Default value: **LayoutMode.VERTICAL**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 275| symmetricExtensible<sup>10+</sup> | boolean | Yes| Whether the images and text on the bottom tab can be symmetrically extended by the minimum value of the available space on the left and right bottom tabs. This parameter is valid only between bottom tabs in fixed horizontal mode.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 276| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10) | Yes| Label text and font of the bottom tab.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 277| id<sup>11+</sup> | string | Yes| [ID](ts-universal-attributes-component-id.md#attributes) of the bottom tab.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 278| iconStyle<sup>12+</sup> | [TabBarIconStyle](#tabbariconstyle12) | Yes| Style of the label icon on the bottom tab.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 279 280## TabBarSymbol<sup>12+</sup> 281 282**Atomic service API**: This API can be used in atomic services since API version 12. 283 284**System capability**: SystemCapability.ArkUI.ArkUI.Full 285 286| Name| Type | Mandatory| Description| 287| -------- | -------- | -------- | -------- | 288| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | Yes| Symbol icon in the normal style.<br>Default value:<br>**fontColor**: **#66182431**, **renderingStrategy**: **SymbolRenderingStrategy.MULTIPLE_OPACITY**, **fontSize**: **24vp**| 289| selected | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Symbol icon in the selected style.<br>Default value:<br>**fontColor**: **#ff007dff**, **renderingStrategy**: **SymbolRenderingStrategy.MULTIPLE_OPACITY**, **fontSize**: **24vp**| 290 291## LayoutMode<sup>10+</sup> 292 293**Atomic service API**: This API can be used in atomic services since API version 11. 294 295**System capability**: SystemCapability.ArkUI.ArkUI.Full 296 297| Name | Description | 298| ---------- | ---------------------------------------- | 299| AUTO | When the tab width is greater than 104 vp, the tab content is arranged from left to right. Otherwise,the tab content is arranged from top to bottom. This parameter is valid only when the tab bar is in vertical mode or fixed horizontal mode.| 300| VERTICAL | The tab content is arranged from top to bottom.| 301| HORIZONTAL | The tab content is arranged from left to right.| 302 303## TabBarIconStyle<sup>12+</sup> 304 305**Atomic service API**: This API can be used in atomic services since API version 12. 306 307**System capability**: SystemCapability.ArkUI.ArkUI.Full 308 309| Name | Type | Mandatory| Description | 310| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 311| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the label icon when it is not selected.<br>Default value: **#33182431**<br>**NOTE**<br>This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.| 312| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the label icon when it is selected.<br>Default value: **#FF007DFF**<br>**NOTE**<br>This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.| 313 314## Events 315 316In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 317 318### onWillShow<sup>12+</sup> 319 320onWillShow(event: VoidCallback) 321 322Called when the tab content is about to be displayed. The scenarios include the first-time display, tab switching, page switching, and window switching between the foreground and background. 323 324**Atomic service API**: This API can be used in atomic services since API version 12. 325 326**System capability**: SystemCapability.ArkUI.ArkUI.Full 327 328**Parameters** 329 330| Name| Type | Mandatory| Description | 331| ------ | --------------------------------------------- | ---- | ----------------------------------- | 332| event | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback for when the tab content is about to be displayed. | 333 334### onWillHide<sup>12+</sup> 335 336onWillHide(event: VoidCallback) 337 338Called when the tab content is about to be hidden. The scenarios include the tab switching, page switching, and window switching between the foreground and background. 339 340**Atomic service API**: This API can be used in atomic services since API version 12. 341 342**System capability**: SystemCapability.ArkUI.ArkUI.Full 343 344**Parameters** 345 346| Name| Type | Mandatory| Description | 347| ------ | --------------------------------------------- | ---- | ----------------------------------- | 348| event | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback for when the tab content is about to be hidden. | 349 350## Example 351 352### Example 1 353 354```ts 355// xxx.ets 356@Entry 357@Component 358struct TabContentExample { 359 @State fontColor: string = '#182431' 360 @State selectedFontColor: string = '#007DFF' 361 @State currentIndex: number = 0 362 private controller: TabsController = new TabsController() 363 364 @Builder tabBuilder(index: number) { 365 Column() { 366 Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 367 .width(24) 368 .height(24) 369 .margin({ bottom: 4 }) 370 .objectFit(ImageFit.Contain) 371 Text(`Tab${index + 1}`) 372 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 373 .fontSize(10) 374 .fontWeight(500) 375 .lineHeight(14) 376 }.width('100%') 377 } 378 379 build() { 380 Column() { 381 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 382 TabContent() { 383 Column() { 384 Text('Tab1') 385 .fontSize(36) 386 .fontColor('#182431') 387 .fontWeight(500) 388 .opacity(0.4) 389 .margin({ top: 30, bottom: 56.5 }) 390 Divider() 391 .strokeWidth(0.5) 392 .color('#182431') 393 .opacity(0.05) 394 }.width('100%') 395 }.tabBar(this.tabBuilder(0)) 396 397 TabContent() { 398 Column() { 399 Text('Tab2') 400 .fontSize(36) 401 .fontColor('#182431') 402 .fontWeight(500) 403 .opacity(0.4) 404 .margin({ top: 30, bottom: 56.5 }) 405 Divider() 406 .strokeWidth(0.5) 407 .color('#182431') 408 .opacity(0.05) 409 }.width('100%') 410 }.tabBar(this.tabBuilder(1)) 411 412 TabContent() { 413 Column() { 414 Text('Tab3') 415 .fontSize(36) 416 .fontColor('#182431') 417 .fontWeight(500) 418 .opacity(0.4) 419 .margin({ top: 30, bottom: 56.5 }) 420 Divider() 421 .strokeWidth(0.5) 422 .color('#182431') 423 .opacity(0.05) 424 }.width('100%') 425 }.tabBar(this.tabBuilder(2)) 426 427 TabContent() { 428 Column() { 429 Text('Tab4') 430 .fontSize(36) 431 .fontColor('#182431') 432 .fontWeight(500) 433 .opacity(0.4) 434 .margin({ top: 30, bottom: 56.5 }) 435 Divider() 436 .strokeWidth(0.5) 437 .color('#182431') 438 .opacity(0.05) 439 }.width('100%') 440 }.tabBar(this.tabBuilder(3)) 441 } 442 .vertical(false) 443 .barHeight(56) 444 .onChange((index: number) => { 445 this.currentIndex = index 446 }) 447 .width(360) 448 .height(190) 449 .backgroundColor('#F1F3F5') 450 .margin({ top: 38 }) 451 }.width('100%') 452 } 453} 454``` 455 456 457 458### Example 2 459 460```ts 461// xxx.ets 462@Entry 463@Component 464struct TabContentExample { 465 @State fontColor: string = '#182431' 466 @State selectedFontColor: string = '#007DFF' 467 @State currentIndex: number = 0 468 private controller: TabsController = new TabsController() 469 470 @Builder tabBuilder(index: number) { 471 Column() { 472 Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 473 .width(24) 474 .height(24) 475 .margin({ bottom: 4 }) 476 .objectFit(ImageFit.Contain) 477 Text('Tab') 478 .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) 479 .fontSize(10) 480 .fontWeight(500) 481 .lineHeight(14) 482 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 483 } 484 485 build() { 486 Column() { 487 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 488 TabContent() 489 .tabBar(this.tabBuilder(0)) 490 TabContent() 491 .tabBar(this.tabBuilder(1)) 492 TabContent() 493 .tabBar(this.tabBuilder(2)) 494 TabContent() 495 .tabBar(this.tabBuilder(3)) 496 } 497 .vertical(true) 498 .barWidth(96) 499 .barHeight(414) 500 .onChange((index: number) => { 501 this.currentIndex = index 502 }) 503 .width(96) 504 .height(414) 505 .backgroundColor('#F1F3F5') 506 .margin({ top: 52 }) 507 }.width('100%') 508 } 509} 510``` 511 512 513 514### Example 3 515 516```ts 517// xxx.ets 518@Entry 519@Component 520struct TabBarStyleExample { 521 build() { 522 Column({ space: 5 }) { 523 Text ("Subtab Style") 524 Column() { 525 Tabs({ barPosition: BarPosition.Start }) { 526 TabContent() { 527 Column().width('100%').height('100%').backgroundColor(Color.Pink) 528 }.tabBar(new SubTabBarStyle('Pink')) 529 .onWillShow(() => { 530 console.info("Pink will show") 531 }) 532 .onWillHide(() => { 533 console.info("Pink will hide") 534 }) 535 536 TabContent() { 537 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 538 }.tabBar(new SubTabBarStyle('Yellow')) 539 .onWillShow(() => { 540 console.info("Yellow will show") 541 }) 542 .onWillHide(() => { 543 console.info("Yellow will hide") 544 }) 545 546 TabContent() { 547 Column().width('100%').height('100%').backgroundColor(Color.Blue) 548 }.tabBar(new SubTabBarStyle('Blue')) 549 .onWillShow(() => { 550 console.info("Blue will show") 551 }) 552 .onWillHide(() => { 553 console.info("Blue will hide") 554 }) 555 556 TabContent() { 557 Column().width('100%').height('100%').backgroundColor(Color.Green) 558 }.tabBar(new SubTabBarStyle('Green')) 559 .onWillShow(() => { 560 console.info("Green will show") 561 }) 562 .onWillHide(() => { 563 console.info("Green will hide") 564 }) 565 } 566 .vertical(false) 567 .scrollable(true) 568 .barMode(BarMode.Fixed) 569 .onChange((index: number) => { 570 console.info(index.toString()) 571 }) 572 .width('100%') 573 .backgroundColor(0xF1F3F5) 574 }.width('100%').height(200) 575 Text ("Bottom Tab Style") 576 Column() { 577 Tabs({ barPosition: BarPosition.End }) { 578 TabContent() { 579 Column().width('100%').height('100%').backgroundColor(Color.Pink) 580 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 581 .onWillShow(() => { 582 console.info("Pink will show") 583 }) 584 .onWillHide(() => { 585 console.info("Pink will hide") 586 }) 587 588 TabContent() { 589 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 590 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 591 .onWillShow(() => { 592 console.info("Yellow will show") 593 }) 594 .onWillHide(() => { 595 console.info("Yellow will hide") 596 }) 597 598 TabContent() { 599 Column().width('100%').height('100%').backgroundColor(Color.Blue) 600 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 601 .onWillShow(() => { 602 console.info("Blue will show") 603 }) 604 .onWillHide(() => { 605 console.info("Blue will hide") 606 }) 607 608 TabContent() { 609 Column().width('100%').height('100%').backgroundColor(Color.Green) 610 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 611 .onWillShow(() => { 612 console.info("Green will show") 613 }) 614 .onWillHide(() => { 615 console.info("Green will hide") 616 }) 617 } 618 .vertical(false) 619 .scrollable(true) 620 .barMode(BarMode.Fixed) 621 .onChange((index: number) => { 622 console.info(index.toString()) 623 }) 624 .width('100%') 625 .backgroundColor(0xF1F3F5) 626 }.width('100%').height(200) 627 Text ("Side Tab Style") 628 Column() { 629 Tabs({ barPosition: BarPosition.Start }) { 630 TabContent() { 631 Column().width('100%').height('100%').backgroundColor(Color.Pink) 632 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 633 .onWillShow(() => { 634 console.info("Pink will show") 635 }) 636 .onWillHide(() => { 637 console.info("Pink will hide") 638 }) 639 640 TabContent() { 641 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 642 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 643 .onWillShow(() => { 644 console.info("Yellow will show") 645 }) 646 .onWillHide(() => { 647 console.info("Yellow will hide") 648 }) 649 650 TabContent() { 651 Column().width('100%').height('100%').backgroundColor(Color.Blue) 652 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 653 .onWillShow(() => { 654 console.info("Blue will show") 655 }) 656 .onWillHide(() => { 657 console.info("Blue will hide") 658 }) 659 660 TabContent() { 661 Column().width('100%').height('100%').backgroundColor(Color.Green) 662 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 663 .onWillShow(() => { 664 console.info("Green will show") 665 }) 666 .onWillHide(() => { 667 console.info("Green will hide") 668 }) 669 } 670 .vertical(true).scrollable(true).barMode(BarMode.Fixed) 671 .onChange((index: number) => { 672 console.info(index.toString()) 673 }) 674 .width('100%') 675 .backgroundColor(0xF1F3F5) 676 }.width('100%').height(400) 677 } 678 } 679} 680``` 681 682 683 684### Example 4 685 686```ts 687// xxx.ets 688@Entry 689@Component 690struct TabsAttr { 691 private controller: TabsController = new TabsController() 692 @State indicatorColor: Color = Color.Blue; 693 @State indicatorWidth: number = 40; 694 @State indicatorHeight: number = 10; 695 @State indicatorBorderRadius: number = 5; 696 @State indicatorSpace: number = 10; 697 @State subTabBorderRadius: number = 20; 698 @State selectedMode: SelectedMode = SelectedMode.INDICATOR; 699 private colorFlag: boolean = true; 700 private widthFlag: boolean = true; 701 private heightFlag: boolean = true; 702 private borderFlag: boolean = true; 703 private spaceFlag: boolean = true; 704 705 build() { 706 Column() { 707 Button ("Change Indicator Color").width ('100%').margin ({ bottom:'12vp' }) 708 .onClick((event?: ClickEvent) => { 709 // Animation configuration for the width and height attributes of the <Button> component 710 if (this.colorFlag) { 711 animateTo({ 712 duration: 1000, // Animation duration. 713 curve: Curve.Linear, // Animation curve. 714 delay: 200, // Animation delay. 715 iterations: 1, // Number of playback times. 716 playMode: PlayMode.Normal, // Animation playback mode. 717 onFinish: () => { 718 console.info('play end') 719 } 720 }, () => { 721 this.indicatorColor = Color.Red 722 }) 723 } else { 724 animateTo({ 725 duration: 1000, // Animation duration. 726 curve: Curve.Linear, // Animation curve. 727 delay: 200, // Animation delay. 728 iterations: 1, // Number of playback times. 729 playMode: PlayMode.Normal, // Animation playback mode. 730 onFinish: () => { 731 console.info('play end') 732 } 733 }, () => { 734 this.indicatorColor = Color.Yellow 735 }) 736 } 737 this.colorFlag = !this.colorFlag 738 }) 739 Button("Change Indicator Height").width('100%').margin({ bottom: '12vp' }) 740 .onClick((event?: ClickEvent) => { 741 // Animation configuration for the width and height attributes of the <Button> component 742 if (this.heightFlag) { 743 animateTo({ 744 duration: 1000, // Animation duration. 745 curve: Curve.Linear, // Animation curve. 746 delay: 200, // Animation delay. 747 iterations: 1, // Number of playback times. 748 playMode: PlayMode.Normal, // Animation playback mode. 749 onFinish: () => { 750 console.info('play end') 751 } 752 }, () => { 753 this.indicatorHeight = 20 754 }) 755 } else { 756 animateTo({ 757 duration: 1000, // Animation duration. 758 curve: Curve.Linear, // Animation curve. 759 delay: 200, // Animation delay. 760 iterations: 1, // Number of playback times. 761 playMode: PlayMode.Normal, // Animation playback mode. 762 onFinish: () => { 763 console.info('play end') 764 } 765 }, () => { 766 this.indicatorHeight = 10 767 }) 768 } 769 this.heightFlag = !this.heightFlag 770 }) 771 Button("Change Indicator Width").width('100%').margin({ bottom: '12vp' }) 772 .onClick((event?: ClickEvent) => { 773 // Animation configuration for the width and height attributes of the <Button> component 774 if (this.widthFlag) { 775 animateTo({ 776 duration: 1000, // Animation duration. 777 curve: Curve.Linear, // Animation curve. 778 delay: 200, // Animation delay. 779 iterations: 1, // Number of playback times. 780 playMode: PlayMode.Normal, // Animation playback mode. 781 onFinish: () => { 782 console.info('play end') 783 } 784 }, () => { 785 this.indicatorWidth = 30 786 }) 787 } else { 788 animateTo({ 789 duration: 1000, // Animation duration. 790 curve: Curve.Linear, // Animation curve. 791 delay: 200, // Animation delay. 792 iterations: 1, // Number of playback times. 793 playMode: PlayMode.Normal, // Animation playback mode. 794 onFinish: () => { 795 console.info('play end') 796 } 797 }, () => { 798 this.indicatorWidth = 50 799 }) 800 } 801 this.widthFlag = !this.widthFlag 802 }) 803 Button ("Change Indicator Corner Radius").width ('100%').margin ({ bottom:'12vp' }) 804 .onClick((event?: ClickEvent) => { 805 // Animation configuration for the width and height attributes of the <Button> component 806 if (this.borderFlag) { 807 animateTo({ 808 duration: 1000, // Animation duration. 809 curve: Curve.Linear, // Animation curve. 810 delay: 200, // Animation delay. 811 iterations: 1, // Number of playback times. 812 playMode: PlayMode.Normal, // Animation playback mode. 813 onFinish: () => { 814 console.info('play end') 815 } 816 }, () => { 817 this.indicatorBorderRadius = 0 818 }) 819 } else { 820 animateTo({ 821 duration: 1000, // Animation duration. 822 curve: Curve.Linear, // Animation curve. 823 delay: 200, // Animation delay. 824 iterations: 1, // Number of playback times. 825 playMode: PlayMode.Normal, // Animation playback mode. 826 onFinish: () => { 827 console.info('play end') 828 } 829 }, () => { 830 this.indicatorBorderRadius = 5 831 }) 832 } 833 this.borderFlag = !this.borderFlag 834 }) 835 Button ("Change Indicator Spacing").width ('100%').margin ({ bottom:'12vp' }) 836 .onClick((event?: ClickEvent) => { 837 // Animation configuration for the width and height attributes of the <Button> component 838 if (this.spaceFlag) { 839 animateTo({ 840 duration: 1000, // Animation duration. 841 curve: Curve.Linear, // Animation curve. 842 delay: 200, // Animation delay. 843 iterations: 1, // Number of playback times. 844 playMode: PlayMode.Normal, // Animation playback mode. 845 onFinish: () => { 846 console.info('play end') 847 } 848 }, () => { 849 this.indicatorSpace = 20 850 }) 851 } else { 852 animateTo({ 853 duration: 1000, // Animation duration. 854 curve: Curve.Linear, // Animation curve. 855 delay: 200, // Animation delay. 856 iterations: 1, // Number of playback times. 857 playMode: PlayMode.Normal, // Animation playback mode. 858 onFinish: () => { 859 console.info('play end') 860 } 861 }, () => { 862 this.indicatorSpace = 10 863 }) 864 } 865 this.spaceFlag = !this.spaceFlag 866 }) 867 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 868 TabContent() { 869 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 870 }.tabBar(SubTabBarStyle.of('pink') 871 .indicator({ 872 color: this.indicatorColor, // Indicator color. 873 height: this.indicatorHeight, // Indicator height. 874 width: this.indicatorWidth, // Indicator width. 875 borderRadius: this.indicatorBorderRadius, // Rounded corner radius of the indicator. 876 marginTop: this.indicatorSpace // Spacing between the indicator and text. 877 }) 878 .selectedMode(this.selectedMode) 879 .board({ borderRadius: this.subTabBorderRadius }) 880 .labelStyle({}) 881 ) 882 883 TabContent() { 884 Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp') 885 }.tabBar('yellow') 886 887 TabContent() { 888 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 889 }.tabBar('blue') 890 891 TabContent() { 892 Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp') 893 }.tabBar('green') 894 895 TabContent() { 896 Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp') 897 }.tabBar('gray') 898 899 TabContent() { 900 Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp') 901 }.tabBar('orange') 902 } 903 .vertical(false) 904 .scrollable(true) 905 .barMode(BarMode.Scrollable) 906 .barHeight(140) 907 .animationDuration(400) 908 .onChange((index: number) => { 909 console.info(index.toString()) 910 }) 911 .backgroundColor(0xF5F5F5) 912 .height(320) 913 }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' }) 914 } 915} 916``` 917 918 919 920### Example 5 921 922```ts 923// xxx.ets 924@Entry 925@Component 926struct TabsTextOverflow { 927 @State message: string = 'Hello World' 928 private controller: TabsController = new TabsController() 929 @State subTabOverflowOpaque: boolean = true; 930 931 build() { 932 Column() { 933 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 934 TabContent() { 935 Column() { 936 Text('Use an ellipsis').fontSize(30).fontColor(0xFF000000) 937 }.width('100%').height('100%').backgroundColor(Color.Pink) 938 } 939 .tabBar(SubTabBarStyle.of('Start [Use an ellipsis; Use an ellipsis] End') 940 .labelStyle({ 941 overflow: TextOverflow.Ellipsis, 942 maxLines: 1, 943 minFontSize: 10, 944 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 945 font: { size: 20 } 946 })) 947 948 TabContent() { 949 Column() { 950 Text('Scale down and then clip').fontSize(30).fontColor(0xFF000000) 951 }.width('100%').height('100%').backgroundColor(Color.Pink) 952 } 953 .tabBar(SubTabBarStyle.of('Start [Scale down and then clip; Scale down and then clip] End') 954 .labelStyle({ 955 overflow: TextOverflow.Clip, 956 maxLines: 1, 957 minFontSize: 15, 958 maxFontSize: 15, 959 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 960 font: { size: 20 } 961 })) 962 963 TabContent() { 964 Column() { 965 Text('Scale down, start a new line, and then clip').fontSize(30).fontColor(0xFF000000) 966 }.width('100%').height('100%').backgroundColor(Color.Pink) 967 } 968 .tabBar(SubTabBarStyle.of('Start [Scale down, start a new line, and then clip; Scale down, start a new line, and then clip] End') 969 .labelStyle({ 970 overflow: TextOverflow.Clip, 971 maxLines: 2, 972 minFontSize: 15, 973 maxFontSize: 15, 974 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 975 font: { size: 20 } 976 })) 977 978 TabContent() { 979 Column() { 980 Text('Start a new line').fontSize(30).fontColor(0xFF000000) 981 } 982 .width('100%').height('100%').backgroundColor(Color.Pink) 983 }.tabBar(SubTabBarStyle.of('Start [Start a new line; Start a new line; Start a new line; Start a new line; Start a new line] End') 984 .labelStyle({ 985 overflow: TextOverflow.Clip, 986 maxLines: 10, 987 minFontSize: 10, 988 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 989 font: { size: 20 } 990 })) 991 } 992 .vertical(true).scrollable(true) 993 .barMode(BarMode.Fixed) 994 .barHeight(720) 995 .barWidth(200).animationDuration(400) 996 .onChange((index: number) => { 997 console.info(index.toString()) 998 }) 999 .height('100%').width('100%') 1000 } 1001 .height('100%') 1002 } 1003} 1004``` 1005 1006 1007 1008### Example 6 1009 1010```ts 1011// xxx.ets 1012@Entry 1013@Component 1014struct TabContentExample6 { 1015 private controller: TabsController = new TabsController() 1016 @State text: string = "2" 1017 @State tabPadding: number = 0; 1018 @State symmetricExtensible: boolean = false; 1019 @State layoutMode: LayoutMode = LayoutMode.VERTICAL; 1020 @State verticalAlign: VerticalAlign = VerticalAlign.Center; 1021 1022 build() { 1023 Column() { 1024 Row() { 1025 Button("padding+10 " + this.tabPadding) 1026 .width('47%') 1027 .height(50) 1028 .margin({ top: 5 }) 1029 .onClick((event?: ClickEvent) => { 1030 this.tabPadding += 10 1031 }) 1032 .margin({ right: '6%', bottom: '12vp' }) 1033 Button("padding-10 " + this.tabPadding) 1034 .width('47%') 1035 .height(50) 1036 .margin({ top: 5 }) 1037 .onClick((event?: ClickEvent) => { 1038 this.tabPadding -= 10 1039 }) 1040 .margin({ bottom: '12vp' }) 1041 } 1042 1043 Row() { 1044 Button ("Add Text") 1045 .width('47%') 1046 .height(50) 1047 .margin({ top: 5 }) 1048 .onClick((event?: ClickEvent) => { 1049 this.text += 'Add Text' 1050 }) 1051 .margin({ right: '6%', bottom: '12vp' }) 1052 Button ("Reset Text") 1053 .width('47%') 1054 .height(50) 1055 .margin({ top: 5 }) 1056 .onClick((event?: ClickEvent) => { 1057 this.text = "2" 1058 }) 1059 .margin({ bottom: '12vp' }) 1060 } 1061 1062 Row() { 1063 Button ("Set SymmetricExtensible to " + this.symmetricExtensible) 1064 .width('100%') 1065 .height(50) 1066 .margin({ top: 5 }) 1067 .onClick((event?: ClickEvent) => { 1068 this.symmetricExtensible = !this.symmetricExtensible 1069 }) 1070 .margin({ bottom: '12vp' }) 1071 } 1072 1073 Row() { 1074 Button ("Vertical Layout") 1075 .width('47%') 1076 .height(50) 1077 .margin({ top: 5 }) 1078 .onClick((event?: ClickEvent) => { 1079 this.layoutMode = LayoutMode.VERTICAL; 1080 }) 1081 .margin({ right: '6%', bottom: '12vp' }) 1082 Button ("Horizontal Layout") 1083 .width('47%') 1084 .height(50) 1085 .margin({ top: 5 }) 1086 .onClick((event?: ClickEvent) => { 1087 this.layoutMode = LayoutMode.HORIZONTAL; 1088 }) 1089 .margin({ bottom: '12vp' }) 1090 } 1091 1092 Row() { 1093 Button ("VerticalAlign.Top") 1094 .width('100%') 1095 .height(50) 1096 .margin({ top: 5 }) 1097 .onClick((event?: ClickEvent) => { 1098 this.verticalAlign = VerticalAlign.Top; 1099 }) 1100 .margin({ bottom: '12vp' }) 1101 } 1102 1103 Row() { 1104 Button ("VerticalAlign.Center") 1105 .width('100%') 1106 .height(50) 1107 .margin({ top: 5 }) 1108 .onClick((event?: ClickEvent) => { 1109 this.verticalAlign = VerticalAlign.Center; 1110 }) 1111 .margin({ bottom: '12vp' }) 1112 } 1113 1114 Row() { 1115 Button ("VerticalAlign.Bottom") 1116 .width('100%') 1117 .height(50) 1118 .margin({ top: 5 }) 1119 .onClick((event?: ClickEvent) => { 1120 this.verticalAlign = VerticalAlign.Bottom; 1121 }) 1122 .margin({ bottom: '12vp' }) 1123 } 1124 1125 1126 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 1127 TabContent() { 1128 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1129 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1")) 1130 1131 TabContent() { 1132 Column().width('100%').height('100%').backgroundColor(Color.Green) 1133 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text) 1134 .padding(this.tabPadding) 1135 .verticalAlign(this.verticalAlign) 1136 .layoutMode(this.layoutMode) 1137 .symmetricExtensible(this.symmetricExtensible)) 1138 1139 TabContent() { 1140 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1141 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3")) 1142 } 1143 .animationDuration(300) 1144 .height('60%') 1145 .backgroundColor(0xf1f3f5) 1146 .barMode(BarMode.Fixed) 1147 } 1148 .width('100%') 1149 .height(500) 1150 .margin({ top: 5 }) 1151 .padding('24vp') 1152 } 1153} 1154``` 1155 1156 1157 1158### Example 7 1159 1160In this example, **unselectedColor** and **selectedColor** in **labelStyle** are used to change the font color of the bottom tab and subtab. 1161**unselectedColor** and **selectedColor** in **iconStyle** are used to change the icon color of the bottom tab. 1162 1163```ts 1164// xxx.ets 1165@Entry 1166@Component 1167struct TabBarStyleExample { 1168 build() { 1169 Column({ space: 5 }) { 1170 Text ("Subtab Style") 1171 Column() { 1172 Tabs({ barPosition: BarPosition.Start }) { 1173 TabContent() { 1174 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1175 }.tabBar(new SubTabBarStyle('Pink') 1176 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1177 1178 TabContent() { 1179 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1180 }.tabBar(new SubTabBarStyle('Yellow') 1181 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1182 1183 TabContent() { 1184 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1185 }.tabBar(new SubTabBarStyle('Blue') 1186 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1187 1188 TabContent() { 1189 Column().width('100%').height('100%').backgroundColor(Color.Green) 1190 }.tabBar(new SubTabBarStyle('Green') 1191 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1192 ) 1193 } 1194 .vertical(false) 1195 .scrollable(true) 1196 .barMode(BarMode.Fixed) 1197 .onChange((index: number) => { 1198 console.info(index.toString()) 1199 }) 1200 .width('100%') 1201 .backgroundColor(0xF1F3F5) 1202 }.width('100%').height(200) 1203 1204 Text ("Bottom Tab Style") 1205 Column() { 1206 Tabs({ barPosition: BarPosition.End }) { 1207 TabContent() { 1208 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1209 } 1210 .tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'pink') 1211 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1212 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1213 ) 1214 1215 TabContent() { 1216 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1217 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Yellow') 1218 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1219 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1220 ) 1221 1222 TabContent() { 1223 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1224 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Blue') 1225 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1226 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1227 ) 1228 1229 TabContent() { 1230 Column().width('100%').height('100%').backgroundColor(Color.Green) 1231 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Green') 1232 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1233 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1234 ) 1235 } 1236 .vertical(false) 1237 .scrollable(true) 1238 .barMode(BarMode.Fixed) 1239 .onChange((index: number) => { 1240 console.info(index.toString()) 1241 }) 1242 .width('100%') 1243 .backgroundColor(0xF1F3F5) 1244 }.width('100%').height(200) 1245 } 1246 } 1247} 1248``` 1249 1250 1251 1252### Example 8 1253This example sets **SubTabBarStyle** through **ComponentContent**. 1254```ts 1255// xxx.ets 1256import { ComponentContent, UIContext } from "@kit.ArkUI" 1257 1258class Params { 1259 text: string = "" 1260 1261 constructor(text: string) { 1262 this.text = text; 1263 } 1264} 1265 1266@Builder 1267function buildText(params: Params) { 1268 Column() { 1269 Text(params.text) 1270 .fontSize(20) 1271 .fontWeight(FontWeight.Bold) 1272 .margin(20) 1273 } 1274} 1275 1276@Entry 1277@Component 1278struct Index { 1279 @State message1: string = "tabBar1" 1280 @State message2: string = "tabBar2" 1281 context: UIContext = this.getUIContext() 1282 private count1 = 0; 1283 private count2 = 0; 1284 private controller: TabsController = new TabsController(); 1285 tabBar1: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message1)); 1286 tabBar2: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message2)); 1287 1288 build() { 1289 Row() { 1290 Column() { 1291 Button("Update tabBar1").width('90%').margin(20) 1292 .onClick((event?: ClickEvent) => { 1293 this.count1 += 1; 1294 const message1 = "Update 1_" + this.count1.toString(); 1295 this.tabBar1.update(new Params(message1)); 1296 }) 1297 Button("Update tabBar2").width('90%').margin(20) 1298 .onClick((event?: ClickEvent) => { 1299 this.count2 += 1; 1300 const message2 = "Update 2_" + this.count2.toString(); 1301 this.tabBar2.update(new Params(message2)); 1302 }) 1303 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1304 TabContent() { 1305 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1306 }.tabBar(new SubTabBarStyle(this.tabBar1)) 1307 TabContent() { 1308 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1309 }.tabBar(SubTabBarStyle.of(this.tabBar2)) 1310 } 1311 .vertical(false) 1312 .barWidth(414) 1313 .barHeight(96) 1314 .width(414) 1315 .height(414) 1316 .backgroundColor('#F1F3F5') 1317 .margin({ top: 20 }) 1318 } 1319 .width('100%') 1320 .height('100%') 1321 } 1322 .height('100%') 1323 } 1324} 1325``` 1326 1327 1328 1329### Example 9 1330In this example, a symbol icon is passed in to **BottomTabBarStyle**. 1331```ts 1332// xxx.ets 1333import { SymbolGlyphModifier } from '@kit.ArkUI' 1334 1335@Entry 1336@Component 1337struct Index { 1338 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 1339 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ellipsis_bubble')); 1340 @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.dot_video')); 1341 @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')); 1342 build() { 1343 Column({space: 5}) { 1344 Text ("Bottom Tab Style") 1345 Column(){ 1346 Tabs({barPosition: BarPosition.End}) { 1347 TabContent() { 1348 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1349 }.tabBar(new BottomTabBarStyle({ 1350 normal: this.symbolModifier1, 1351 }, 'Pink')) 1352 .onWillShow(() => { 1353 console.info("Pink will show") 1354 }) 1355 .onWillHide(() => { 1356 console.info("Pink will hide") 1357 }) 1358 1359 TabContent() { 1360 Column().width('100%').height('100%').backgroundColor(Color.Orange) 1361 }.tabBar(new BottomTabBarStyle({ 1362 normal: this.symbolModifier2, 1363 }, 'Orange')) 1364 .onWillShow(() => { 1365 console.info("Orange will show") 1366 }) 1367 .onWillHide(() => { 1368 console.info("Orange will hide") 1369 }) 1370 1371 TabContent() { 1372 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1373 }.tabBar(new BottomTabBarStyle({ 1374 normal: this.symbolModifier3, 1375 }, 'Blue')) 1376 .onWillShow(() => { 1377 console.info("Blue will show") 1378 }) 1379 .onWillHide(() => { 1380 console.info("Blue will hide") 1381 }) 1382 1383 TabContent() { 1384 Column().width('100%').height('100%').backgroundColor(Color.Green) 1385 }.tabBar(new BottomTabBarStyle({ 1386 normal: this.symbolModifier4, 1387 }, 'Green')) 1388 .onWillShow(() => { 1389 console.info("Green will show") 1390 }) 1391 .onWillHide(() => { 1392 console.info("Green will hide") 1393 }) 1394 } 1395 .vertical(false) 1396 .scrollable(true) 1397 .barMode(BarMode.Fixed) 1398 .onChange((index:number)=>{ 1399 console.info(index.toString()) 1400 }) 1401 .width('100%') 1402 .backgroundColor(0xF1F3F5) 1403 }.width('100%').height(200) 1404 } 1405 } 1406} 1407``` 1408 1409 1410
