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 23Creates the **TabContent** component, which represents the content associated with a specific tab. 24 25**Atomic service API**: This API can be used in atomic services since API version 11. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29## Attributes 30 31In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 32 33### tabBar 34 35tabBar(value: string | Resource | CustomBuilder | { icon?: string | Resource; text?: string | Resource }) 36 37Sets the content displayed on the tab bar. 38 39If 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. 40 41If the content set exceeds the space provided by the tab bar, it will be clipped. 42 43**Atomic service API**: This API can be used in atomic services since API version 11. 44 45**System capability**: SystemCapability.ArkUI.ArkUI.Full 46 47**Parameters** 48 49| Name| Type| Mandatory| Description| 50| -------- | -------- | -------- | -------- | 51| 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).| 52 53### tabBar<sup>9+</sup> 54 55tabBar(value: SubTabBarStyle | BottomTabBarStyle) 56 57Sets 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. 58 59**Atomic service API**: This API can be used in atomic services since API version 11. 60 61**System capability**: SystemCapability.ArkUI.ArkUI.Full 62 63**Parameters** 64 65| Name| Type | Mandatory| Description | 66| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 67| value | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Yes | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style<br>**BottomTabBarStyle**: bottom and side tab style| 68 69> **NOTE** 70> 71> - 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. 72> - 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. 73> - If the **vertical** attribute is **false**, the width and height descriptions are swapped in the preceding two restrictions. 74> - **TabContent** does not support page scrolling. If page scrolling is required, consider nesting a list. 75> - Whenever possible, use a unified parameter type for the **tabBar** property of all child **TabContent** components within the **Tabs** component. 76> - If there are focusable components inside any **TabContent**, focus navigation between **TabContent** and **TabBar** components within the **Tabs** component is only supported using the keyboard arrow keys. 77 78## SubTabBarStyle<sup>9+</sup> 79 80Implements the subtab style. A transition animation is played when the user switches between tabs. 81 82### constructor 83 84constructor(content: ResourceStr) 85 86Constructor used to create a **SubTabBarStyle** instance. 87 88**Atomic service API**: This API can be used in atomic services since API version 11. 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92**Parameters** 93 94| Name| Type | Mandatory| Description| 95| -------- | -------- | -------- | -------- | 96| content | [ResourceStr](ts-types.md#resourcestr) | Yes| Text for the tab.| 97 98### constructor<sup>12+</sup> 99 100constructor(content: ResourceStr | ComponentContent) 101 102Constructor used to create a **SubTabBarStyle** instance. You can set custom content with **ComponentContent**. 103 104**Atomic service API**: This API can be used in atomic services since API version 12. 105 106**System capability**: SystemCapability.ArkUI.ArkUI.Full 107 108**Parameters** 109 110| Name| Type | Mandatory| Description| 111| -------- | -------- | -------- | -------- | 112| 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.| 113 114### of<sup>10+</sup> 115 116static of(content: ResourceStr): SubTabBarStyle 117 118Static constructor used to create a **SubTabBarStyle** instance. 119 120**Atomic service API**: This API can be used in atomic services since API version 11. 121 122**System capability**: SystemCapability.ArkUI.ArkUI.Full 123 124**Parameters** 125 126| Name | Type | Mandatory| Description | 127| ------- | ------------------------------------------ | ---- | ------------------ | 128| content | [ResourceStr](ts-types.md#resourcestr) | Yes | Text for the tab.| 129 130**Return value** 131 132| Type | Description | 133| ------- | ------------------------------------------------------------ | 134| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object created.| 135 136### of<sup>12+</sup> 137 138static of(content: ResourceStr | ComponentContent): SubTabBarStyle 139 140Static constructor used to create a **SubTabBarStyle** instance. You can set custom content with **ComponentContent**. 141 142**Atomic service API**: This API can be used in atomic services since API version 12. 143 144**System capability**: SystemCapability.ArkUI.ArkUI.Full 145 146**Parameters** 147 148| Name | Type | Mandatory| Description | 149| ------- | ------------------------------------------ | ---- | ------------------ | 150| 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.| 151 152**Return value** 153 154| Type | Description | 155| ------- | ------------------------------------------------------------ | 156| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object created.| 157 158### indicator<sup>10+</sup> 159 160indicator(value: IndicatorStyle): SubTabBarStyle 161 162Sets the indicator style of the selected subtab. It takes effect only in the horizontal layout. 163 164**Atomic service API**: This API can be used in atomic services since API version 11. 165 166**System capability**: SystemCapability.ArkUI.ArkUI.Full 167 168**Parameters** 169 170| Name | Type | Mandatory| Description | 171| ------- | ------------------------------------- | ---- | ------------- | 172| value | [IndicatorStyle](#indicatorstyle10)| Yes | Indicator style object for the selected subtab.| 173 174**Return value** 175 176| Type | Description | 177| ------- | ------------------------------------------------------------ | 178| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object.| 179 180### selectedMode<sup>10+</sup> 181 182selectedMode(value: SelectedMode): SubTabBarStyle 183 184Sets the display mode of the selected subtab. It takes effect only in the horizontal layout. 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**Parameters** 191 192| Name | Type | Mandatory| Description | 193| ------- | ------------------------------------- | ---- | ------------- | 194| value | [SelectedMode](#selectedmode10) | Yes | Display mode of the selected subtab.<br>Default value: **SelectedMode.INDICATOR**| 195 196**Return value** 197 198| Type | Description | 199| ------- | ------------------------------------------------------------ | 200| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object.| 201 202### board<sup>10+</sup> 203 204board(value: BoardStyle): SubTabBarStyle 205 206Sets the background style (board style) of the selected subtab. It takes effect only in the horizontal layout. 207 208**Atomic service API**: This API can be used in atomic services since API version 11. 209 210**System capability**: SystemCapability.ArkUI.ArkUI.Full 211 212**Parameters** 213 214| Name | Type | Mandatory| Description | 215| ------- | ------------------------------------- | ---- | ------------- | 216| value | [BoardStyle](#boardstyle10) | Yes | Background style object for the selected subtab.| 217 218**Return value** 219 220| Type | Description | 221| ------- | ------------------------------------------------------------ | 222| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object.| 223 224### labelStyle<sup>10+</sup> 225 226labelStyle(value: LabelStyle): SubTabBarStyle 227 228Sets the style of the label text and font for the subtab. 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| value | [LabelStyle](#labelstyle10) | Yes | Style object for the label text and font of the subtab.| 239 240**Return value** 241 242| Type | Description | 243| ------- | ------------------------------------------------------------ | 244| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object.| 245 246### padding<sup>10+</sup> 247 248padding(value: Padding | Dimension): SubTabBarStyle 249 250Sets the padding of the subtab. It cannot be set in percentage. When the parameter is of the Dimension type, the value applies to all sides. 251 252**Atomic service API**: This API can be used in atomic services since API version 11. 253 254**System capability**: SystemCapability.ArkUI.ArkUI.Full 255 256**Parameters** 257 258| Name | Type | Mandatory| Description | 259| ------- | ------------------------------------- | ---- | ------------- | 260| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | Yes | Padding of the subtab.<br>Default value: **{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp}**| 261 262**Return value** 263 264| Type | Description | 265| ------- | ------------------------------------------------------------ | 266| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object.| 267 268### padding<sup>12+</sup> 269 270padding(padding: LocalizedPadding): SubTabBarStyle 271 272Sets the padding of the subtab. This API supports mirroring but does not support percentage-based settings. 273 274**Atomic service API**: This API can be used in atomic services since API version 12. 275 276**System capability**: SystemCapability.ArkUI.ArkUI.Full 277 278**Parameters** 279 280| Name | Type | Mandatory| Description | 281| ------- | ------------------------------------- | ---- | ------------- | 282| padding | [LocalizedPadding](ts-types.md#localizedpadding12) | Yes | Padding of the subtab.<br>Default value: {start:LengthMetircs.vp(8),end:LengthMetircs.vp(8),<br>top:LengthMetircs.vp(17),bottom:LengthMetircs.vp(18)} | 283 284**Return value** 285 286| Type | Description | 287| ------- | ------------------------------------------------------------ | 288| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object.| 289 290### id<sup>11+</sup> 291 292id(value: string): SubTabBarStyle 293 294Sets the [ID](ts-universal-attributes-component-id.md#id) of the subtab. 295 296**Atomic service API**: This API can be used in atomic services since API version 12. 297 298**System capability**: SystemCapability.ArkUI.ArkUI.Full 299 300**Parameters** 301 302| Name | Type | Mandatory| Description | 303| ------- | ------------------------------------- | ---- | ------------- | 304| value | string | Yes | [ID](ts-universal-attributes-component-id.md#id) of the subtab.| 305 306**Return value** 307 308| Type | Description | 309| ------- | ------------------------------------------------------------ | 310| [SubTabBarStyle](#subtabbarstyle9) | **SubTabBarStyle** object.| 311 312## IndicatorStyle<sup>10+</sup> 313 314Represents an indicator style object. 315 316**Atomic service API**: This API can be used in atomic services since API version 11. 317 318**System capability**: SystemCapability.ArkUI.ArkUI.Full 319 320| Name| Type| Mandatory| Description| 321| -------- | -------- | -------- | -------------------------------- | 322| color | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the indicator and board.<br>Default value: **#FF007DFF**| 323| 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| 324| 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.| 325| 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| 326| 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| 327 328## SelectedMode<sup>10+</sup> 329 330Enumerates the display modes of selected subtabs. 331 332**Atomic service API**: This API can be used in atomic services since API version 11. 333 334**System capability**: SystemCapability.ArkUI.ArkUI.Full 335 336| Name | Description | 337| ---------- | ------------------------ | 338| INDICATOR | Indicator mode. | 339| BOARD | Board mode. | 340 341## BoardStyle<sup>10+</sup> 342 343Represents a board style object. 344 345**Atomic service API**: This API can be used in atomic services since API version 11. 346 347**System capability**: SystemCapability.ArkUI.ArkUI.Full 348 349| Name| Type| Mandatory| Description| 350| -------- | -------- | -------- | ------------------------------------ | 351| 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| 352 353## LabelStyle<sup>10+</sup> 354 355Represents a style object for the label text and font. 356 357**System capability**: SystemCapability.ArkUI.ArkUI.Full 358 359| Name | Type | Mandatory| Description | 360| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 361| 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.| 362| 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.| 363| 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.| 364| 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.| 365| 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.| 366| 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, normal font style, medium weight when selected, and normal weight when not selected.<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.| 367| 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.| 368| 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.| 369 370## BottomTabBarStyle<sup>9+</sup> 371 372Implements the bottom and side tab style. 373 374### constructor 375 376constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr) 377 378Constructor used to create a **BottomTabBarStyle** instance. 379 380**Atomic service API**: This API can be used in atomic services since API version 11. 381 382**System capability**: SystemCapability.ArkUI.ArkUI.Full 383 384**Parameters** 385 386| Name| Type | Mandatory| Description| 387| -------- | -------- | -------- | -------- | 388| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12)| Yes| Image for the tab.| 389| text | [ResourceStr](ts-types.md#resourcestr) | Yes| Text for the tab.| 390 391### of<sup>10+</sup> 392 393static of(icon: ResourceStr | TabBarSymbol, text: ResourceStr): BottomTabBarStyle 394 395Static constructor used to create a **BottomTabBarStyle** instance. 396 397**Atomic service API**: This API can be used in atomic services since API version 11. 398 399**System capability**: SystemCapability.ArkUI.ArkUI.Full 400 401**Parameters** 402 403| Name| Type | Mandatory| Description| 404| -------- | -------- | -------- | -------- | 405| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12)| Yes| Image for the tab.| 406| text | [ResourceStr](ts-types.md#resourcestr) | Yes| Text for the tab.| 407 408**Return value** 409 410| Type | Description | 411| ------- | ------------------------------------------------------------ | 412| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object created.| 413 414### padding<sup>10+</sup> 415 416padding(value: Padding | Dimension | LocalizedPadding): BottomTabBarStyle 417 418Sets the 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. 419 420**Atomic service API**: This API can be used in atomic services since API version 11. 421 422**System capability**: SystemCapability.ArkUI.ArkUI.Full 423 424**Parameters** 425 426| Name | Type | Mandatory| Description | 427| ------- | ------------------------------------- | ---- | ------------- | 428| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) \| [LocalizedPadding<sup>12+</sup>](ts-types.md#localizedpadding12) | Yes | Padding of the bottom tab.<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)} | 429 430**Return value** 431 432| Type | Description | 433| ------- | ------------------------------------------------------------ | 434| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object.| 435 436### verticalAlign<sup>10+</sup> 437 438verticalAlign(value: VerticalAlign): BottomTabBarStyle 439 440Sets the vertical alignment mode of the images and text on the bottom tab. 441 442**Atomic service API**: This API can be used in atomic services since API version 11. 443 444**System capability**: SystemCapability.ArkUI.ArkUI.Full 445 446**Parameters** 447 448| Name | Type | Mandatory| Description | 449| ------- | ------------------------------------- | ---- | ------------- | 450| value | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Yes | Vertical alignment mode of the images and text on the bottom tab.<br>Default value: **VerticalAlign.Center**| 451 452**Return value** 453 454| Type | Description | 455| ------- | ------------------------------------------------------------ | 456| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object.| 457 458### layoutMode<sup>10+</sup> 459 460layoutMode(value: LayoutMode): BottomTabBarStyle 461 462Sets the layout mode of the images and texts on the bottom tab. 463 464**Atomic service API**: This API can be used in atomic services since API version 11. 465 466**System capability**: SystemCapability.ArkUI.ArkUI.Full 467 468**Parameters** 469 470| Name | Type | Mandatory| Description | 471| ------- | ------------------------------------- | ---- | ------------- | 472| value | [LayoutMode](#layoutmode10) | Yes | Layout mode of the images and text on the bottom tab.<br>Default value: **LayoutMode.VERTICAL**| 473 474**Return value** 475 476| Type | Description | 477| ------- | ------------------------------------------------------------ | 478| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object.| 479 480### symmetricExtensible<sup>10+</sup> 481 482symmetricExtensible(value: boolean): BottomTabBarStyle 483 484Sets 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. 485 486**Atomic service API**: This API can be used in atomic services since API version 11. 487 488**System capability**: SystemCapability.ArkUI.ArkUI.Full 489 490**Parameters** 491 492| Name | Type | Mandatory| Description | 493| ------- | ------------------------------------- | ---- | ------------- | 494| value | 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.<br>Default value: **false**| 495 496**Return value** 497 498| Type | Description | 499| ------- | ------------------------------------------------------------ | 500| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object.| 501 502### labelStyle<sup>10+</sup> 503 504labelStyle(value: LabelStyle): BottomTabBarStyle 505 506Sets the style of the label text and font for the bottom tab. 507 508**Atomic service API**: This API can be used in atomic services since API version 11. 509 510**System capability**: SystemCapability.ArkUI.ArkUI.Full 511 512**Parameters** 513 514| Name | Type | Mandatory| Description | 515| ------- | ------------------------------------- | ---- | ------------- | 516| value | [LabelStyle](#labelstyle10) | Yes | Style of the label text and font for the bottom tab.| 517 518**Return value** 519 520| Type | Description | 521| ------- | ------------------------------------------------------------ | 522| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object.| 523 524### id<sup>11+</sup> 525 526id(value: string): BottomTabBarStyle 527 528Sets the ID of the bottom tab. 529 530**Atomic service API**: This API can be used in atomic services since API version 12. 531 532**System capability**: SystemCapability.ArkUI.ArkUI.Full 533 534**Parameters** 535 536| Name | Type | Mandatory| Description | 537| ------- | ------------------------------------- | ---- | ------------- | 538| value | string | Yes | [ID](ts-universal-attributes-component-id.md#id) of the bottom tab.| 539 540**Return value** 541 542| Type | Description | 543| ------- | ------------------------------------------------------------ | 544| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object.| 545 546### iconStyle<sup>12+</sup> 547 548iconStyle(style: TabBarIconStyle): BottomTabBarStyle 549 550Sets the style of the label icon on the bottom tab. 551 552**Atomic service API**: This API can be used in atomic services since API version 12. 553 554**System capability**: SystemCapability.ArkUI.ArkUI.Full 555 556**Parameters** 557 558| Name | Type | Mandatory| Description | 559| ------- | ------------------------------------- | ---- | ------------- | 560| style | [TabBarIconStyle](#tabbariconstyle12) | Yes | Style of the label icon on the bottom tab.| 561 562**Return value** 563 564| Type | Description | 565| ------- | ------------------------------------------------------------ | 566| [BottomTabBarStyle](#bottomtabbarstyle9) | **BottomTabBarStyle** object.| 567 568## TabBarSymbol<sup>12+</sup> 569 570Represents a tab bar symbol style object. 571 572**Atomic service API**: This API can be used in atomic services since API version 12. 573 574**System capability**: SystemCapability.ArkUI.ArkUI.Full 575 576| Name| Type | Mandatory| Description| 577| -------- | -------- | -------- | -------- | 578| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | Yes| Symbol icon in the normal style.<br>Default value:<br>**fontColor**: **#66182431**<br>**renderingStrategy**: **SymbolRenderingStrategy.MULTIPLE_OPACITY**<br>**fontSize**: **24vp**| 579| selected | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No| Symbol icon in the selected style.<br>Default value:<br>**fontColor**: **#ff007dff**<br>**renderingStrategy**: **SymbolRenderingStrategy.MULTIPLE_OPACITY**<br>**fontSize**: **24vp**| 580 581## LayoutMode<sup>10+</sup> 582 583Enumerates the layout modes of the images and texts on the bottom tabs. 584 585**Atomic service API**: This API can be used in atomic services since API version 11. 586 587**System capability**: SystemCapability.ArkUI.ArkUI.Full 588 589| Name | Description | 590| ---------- | ---------------------------------------- | 591| 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.| 592| VERTICAL | The tab content is arranged from top to bottom.| 593| HORIZONTAL | The tab content is arranged from left to right.| 594 595## TabBarIconStyle<sup>12+</sup> 596 597Represents a label icon style object. 598 599**Atomic service API**: This API can be used in atomic services since API version 12. 600 601**System capability**: SystemCapability.ArkUI.ArkUI.Full 602 603| Name | Type | Mandatory| Description | 604| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 605| 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.| 606| 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.| 607 608## Events 609 610In addition to the [universal events](ts-component-general-events.md), the following events are supported. 611 612### onWillShow<sup>12+</sup> 613 614onWillShow(event: VoidCallback) 615 616Called 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. 617 618**Atomic service API**: This API can be used in atomic services since API version 12. 619 620**System capability**: SystemCapability.ArkUI.ArkUI.Full 621 622**Parameters** 623 624| Name| Type | Mandatory| Description | 625| ------ | --------------------------------------------- | ---- | ----------------------------------- | 626| event | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback for when the tab content is about to be displayed. | 627 628### onWillHide<sup>12+</sup> 629 630onWillHide(event: VoidCallback) 631 632Called 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. 633 634**Atomic service API**: This API can be used in atomic services since API version 12. 635 636**System capability**: SystemCapability.ArkUI.ArkUI.Full 637 638**Parameters** 639 640| Name| Type | Mandatory| Description | 641| ------ | --------------------------------------------- | ---- | ----------------------------------- | 642| event | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback for when the tab content is about to be hidden. | 643 644## Example 645 646### Example 1: Implementing Custom Tab Switching Synchronization 647 648This example demonstrates how to use **onAnimationStart** and **onChange** to implement synchronized switching between the tab bar and tab content. 649 650```ts 651// xxx.ets 652@Entry 653@Component 654struct TabContentExample { 655 @State fontColor: string = '#182431' 656 @State selectedFontColor: string = '#007DFF' 657 @State currentIndex: number = 0 658 @State selectedIndex: number = 0 659 private controller: TabsController = new TabsController() 660 661 @Builder tabBuilder(index: number) { 662 Column() { 663 Image(this.selectedIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 664 .width(24) 665 .height(24) 666 .margin({ bottom: 4 }) 667 .objectFit(ImageFit.Contain) 668 Text(`Tab${index + 1}`) 669 .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) 670 .fontSize(10) 671 .fontWeight(500) 672 .lineHeight(14) 673 }.width('100%') 674 } 675 676 build() { 677 Column() { 678 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 679 TabContent() { 680 Column() { 681 Text('Tab1') 682 .fontSize(36) 683 .fontColor('#182431') 684 .fontWeight(500) 685 .opacity(0.4) 686 .margin({ top: 30, bottom: 56.5 }) 687 Divider() 688 .strokeWidth(0.5) 689 .color('#182431') 690 .opacity(0.05) 691 }.width('100%') 692 }.tabBar(this.tabBuilder(0)) 693 694 TabContent() { 695 Column() { 696 Text('Tab2') 697 .fontSize(36) 698 .fontColor('#182431') 699 .fontWeight(500) 700 .opacity(0.4) 701 .margin({ top: 30, bottom: 56.5 }) 702 Divider() 703 .strokeWidth(0.5) 704 .color('#182431') 705 .opacity(0.05) 706 }.width('100%') 707 }.tabBar(this.tabBuilder(1)) 708 709 TabContent() { 710 Column() { 711 Text('Tab3') 712 .fontSize(36) 713 .fontColor('#182431') 714 .fontWeight(500) 715 .opacity(0.4) 716 .margin({ top: 30, bottom: 56.5 }) 717 Divider() 718 .strokeWidth(0.5) 719 .color('#182431') 720 .opacity(0.05) 721 }.width('100%') 722 }.tabBar(this.tabBuilder(2)) 723 724 TabContent() { 725 Column() { 726 Text('Tab4') 727 .fontSize(36) 728 .fontColor('#182431') 729 .fontWeight(500) 730 .opacity(0.4) 731 .margin({ top: 30, bottom: 56.5 }) 732 Divider() 733 .strokeWidth(0.5) 734 .color('#182431') 735 .opacity(0.05) 736 }.width('100%') 737 }.tabBar(this.tabBuilder(3)) 738 } 739 .vertical(false) 740 .barHeight(56) 741 .onChange((index: number) => { 742 // currentIndex controls the displayed tab in TabContent. 743 this.currentIndex = index 744 this.selectedIndex = index 745 }) 746 .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { 747 if (index === targetIndex) { 748 return 749 } 750 // selectedIndex controls the color switching for the image and text in the custom tab bar. 751 this.selectedIndex = targetIndex 752 }) 753 .width(360) 754 .height(190) 755 .backgroundColor('#F1F3F5') 756 .margin({ top: 38 }) 757 }.width('100%') 758 } 759} 760``` 761 762 763 764### Example 2: Implementing a Custom Side Tabs 765 766This example demonstrates how to create side tabs using **vertical** and **barPosition**. 767 768```ts 769// xxx.ets 770@Entry 771@Component 772struct TabContentExample { 773 @State fontColor: string = '#182431' 774 @State selectedFontColor: string = '#007DFF' 775 @State currentIndex: number = 0 776 @State selectedIndex: number = 0 777 private controller: TabsController = new TabsController() 778 779 @Builder tabBuilder(index: number) { 780 Column() { 781 Image(this.selectedIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 782 .width(24) 783 .height(24) 784 .margin({ bottom: 4 }) 785 .objectFit(ImageFit.Contain) 786 Text('Tab') 787 .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) 788 .fontSize(10) 789 .fontWeight(500) 790 .lineHeight(14) 791 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 792 } 793 794 build() { 795 Column() { 796 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 797 TabContent() 798 .tabBar(this.tabBuilder(0)) 799 TabContent() 800 .tabBar(this.tabBuilder(1)) 801 TabContent() 802 .tabBar(this.tabBuilder(2)) 803 TabContent() 804 .tabBar(this.tabBuilder(3)) 805 } 806 .vertical(true) 807 .barWidth(96) 808 .barHeight(414) 809 .onChange((index: number) => { 810 // currentIndex controls the displayed tab in TabContent. 811 this.currentIndex = index 812 this.selectedIndex = index 813 }) 814 .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { 815 if (index === targetIndex) { 816 return 817 } 818 // selectedIndex controls the color switching for the image and text in the custom tab bar. 819 this.selectedIndex = targetIndex 820 }) 821 .width(96) 822 .height(414) 823 .backgroundColor('#F1F3F5') 824 .margin({ top: 52 }) 825 }.width('100%') 826 } 827} 828``` 829 830 831 832### Example 3: Implementing Different Styles of Tabs 833 834This example demonstrates the implementation of subtabs, bottom tabs, and side tabs using **SubTabBarStyle** and **BottomTabBarStyle**. 835 836```ts 837// xxx.ets 838@Entry 839@Component 840struct TabBarStyleExample { 841 build() { 842 Column({ space: 5 }) { 843 Text("Subtab style") 844 Column() { 845 Tabs({ barPosition: BarPosition.Start }) { 846 TabContent() { 847 Column().width('100%').height('100%').backgroundColor(Color.Pink) 848 }.tabBar(new SubTabBarStyle('Pink')) 849 .onWillShow(() => { 850 console.info("Pink will show") 851 }) 852 .onWillHide(() => { 853 console.info("Pink will hide") 854 }) 855 856 TabContent() { 857 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 858 }.tabBar(new SubTabBarStyle('Yellow')) 859 .onWillShow(() => { 860 console.info("Yellow will show") 861 }) 862 .onWillHide(() => { 863 console.info("Yellow will hide") 864 }) 865 866 TabContent() { 867 Column().width('100%').height('100%').backgroundColor(Color.Blue) 868 }.tabBar(new SubTabBarStyle('Blue')) 869 .onWillShow(() => { 870 console.info("Blue will show") 871 }) 872 .onWillHide(() => { 873 console.info("Blue will hide") 874 }) 875 876 TabContent() { 877 Column().width('100%').height('100%').backgroundColor(Color.Green) 878 }.tabBar(new SubTabBarStyle('Green')) 879 .onWillShow(() => { 880 console.info("Green will show") 881 }) 882 .onWillHide(() => { 883 console.info("Green will hide") 884 }) 885 } 886 .vertical(false) 887 .scrollable(true) 888 .barMode(BarMode.Fixed) 889 .onChange((index: number) => { 890 console.info(index.toString()) 891 }) 892 .width('100%') 893 .backgroundColor(0xF1F3F5) 894 }.width('100%').height(200) 895 Text("Bottom tab style") 896 Column() { 897 Tabs({ barPosition: BarPosition.End }) { 898 TabContent() { 899 Column().width('100%').height('100%').backgroundColor(Color.Pink) 900 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 901 .onWillShow(() => { 902 console.info("Pink will show") 903 }) 904 .onWillHide(() => { 905 console.info("Pink will hide") 906 }) 907 908 TabContent() { 909 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 910 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 911 .onWillShow(() => { 912 console.info("Yellow will show") 913 }) 914 .onWillHide(() => { 915 console.info("Yellow will hide") 916 }) 917 918 TabContent() { 919 Column().width('100%').height('100%').backgroundColor(Color.Blue) 920 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 921 .onWillShow(() => { 922 console.info("Blue will show") 923 }) 924 .onWillHide(() => { 925 console.info("Blue will hide") 926 }) 927 928 TabContent() { 929 Column().width('100%').height('100%').backgroundColor(Color.Green) 930 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 931 .onWillShow(() => { 932 console.info("Green will show") 933 }) 934 .onWillHide(() => { 935 console.info("Green will hide") 936 }) 937 } 938 .vertical(false) 939 .scrollable(true) 940 .barMode(BarMode.Fixed) 941 .onChange((index: number) => { 942 console.info(index.toString()) 943 }) 944 .width('100%') 945 .backgroundColor(0xF1F3F5) 946 }.width('100%').height(200) 947 Text("Side tab style") 948 Column() { 949 Tabs({ barPosition: BarPosition.Start }) { 950 TabContent() { 951 Column().width('100%').height('100%').backgroundColor(Color.Pink) 952 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 953 .onWillShow(() => { 954 console.info("Pink will show") 955 }) 956 .onWillHide(() => { 957 console.info("Pink will hide") 958 }) 959 960 TabContent() { 961 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 962 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 963 .onWillShow(() => { 964 console.info("Yellow will show") 965 }) 966 .onWillHide(() => { 967 console.info("Yellow will hide") 968 }) 969 970 TabContent() { 971 Column().width('100%').height('100%').backgroundColor(Color.Blue) 972 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 973 .onWillShow(() => { 974 console.info("Blue will show") 975 }) 976 .onWillHide(() => { 977 console.info("Blue will hide") 978 }) 979 980 TabContent() { 981 Column().width('100%').height('100%').backgroundColor(Color.Green) 982 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 983 .onWillShow(() => { 984 console.info("Green will show") 985 }) 986 .onWillHide(() => { 987 console.info("Green will hide") 988 }) 989 } 990 .vertical(true).scrollable(true).barMode(BarMode.Fixed) 991 .onChange((index: number) => { 992 console.info(index.toString()) 993 }) 994 .width('100%') 995 .backgroundColor(0xF1F3F5) 996 }.width('100%').height(400) 997 } 998 } 999} 1000``` 1001 1002 1003 1004### Example 4: Setting the Indicator for Subtabs 1005 1006This example demonstrates how to set the indicator for subtabs using the **indicator** property in **SubTabBarStyle**. 1007 1008```ts 1009// xxx.ets 1010@Entry 1011@Component 1012struct TabsAttr { 1013 private controller: TabsController = new TabsController() 1014 @State indicatorColor: Color = Color.Blue; 1015 @State indicatorWidth: number = 40; 1016 @State indicatorHeight: number = 10; 1017 @State indicatorBorderRadius: number = 5; 1018 @State indicatorSpace: number = 10; 1019 @State subTabBorderRadius: number = 20; 1020 @State selectedMode: SelectedMode = SelectedMode.INDICATOR; 1021 private colorFlag: boolean = true; 1022 private widthFlag: boolean = true; 1023 private heightFlag: boolean = true; 1024 private borderFlag: boolean = true; 1025 private spaceFlag: boolean = true; 1026 1027 build() { 1028 Column() { 1029 Button("Change Indicator Color").width('100%').margin({ bottom: '12vp' }) 1030 .onClick((event?: ClickEvent) => { 1031 // Animation configuration for the width and height attributes of the <Button> component 1032 if (this.colorFlag) { 1033 animateTo({ 1034 duration: 1000, // Animation duration. 1035 curve: Curve.Linear, // Animation curve. 1036 delay: 200, // Animation delay. 1037 iterations: 1, // Number of playback times. 1038 playMode: PlayMode.Normal, // Animation playback mode. 1039 onFinish: () => { 1040 console.info('play end') 1041 } 1042 }, () => { 1043 this.indicatorColor = Color.Red 1044 }) 1045 } else { 1046 animateTo({ 1047 duration: 1000, // Animation duration. 1048 curve: Curve.Linear, // Animation curve. 1049 delay: 200, // Animation delay. 1050 iterations: 1, // Number of playback times. 1051 playMode: PlayMode.Normal, // Animation playback mode. 1052 onFinish: () => { 1053 console.info('play end') 1054 } 1055 }, () => { 1056 this.indicatorColor = Color.Yellow 1057 }) 1058 } 1059 this.colorFlag = !this.colorFlag 1060 }) 1061 Button("Change Indicator Height").width('100%').margin({ bottom: '12vp' }) 1062 .onClick((event?: ClickEvent) => { 1063 // Animation configuration for the width and height attributes of the <Button> component 1064 if (this.heightFlag) { 1065 animateTo({ 1066 duration: 1000, // Animation duration. 1067 curve: Curve.Linear, // Animation curve. 1068 delay: 200, // Animation delay. 1069 iterations: 1, // Number of playback times. 1070 playMode: PlayMode.Normal, // Animation playback mode. 1071 onFinish: () => { 1072 console.info('play end') 1073 } 1074 }, () => { 1075 this.indicatorHeight = 20 1076 }) 1077 } else { 1078 animateTo({ 1079 duration: 1000, // Animation duration. 1080 curve: Curve.Linear, // Animation curve. 1081 delay: 200, // Animation delay. 1082 iterations: 1, // Number of playback times. 1083 playMode: PlayMode.Normal, // Animation playback mode. 1084 onFinish: () => { 1085 console.info('play end') 1086 } 1087 }, () => { 1088 this.indicatorHeight = 10 1089 }) 1090 } 1091 this.heightFlag = !this.heightFlag 1092 }) 1093 Button("Change Indicator Width").width('100%').margin({ bottom: '12vp' }) 1094 .onClick((event?: ClickEvent) => { 1095 // Animation configuration for the width and height attributes of the <Button> component 1096 if (this.widthFlag) { 1097 animateTo({ 1098 duration: 1000, // Animation duration. 1099 curve: Curve.Linear, // Animation curve. 1100 delay: 200, // Animation delay. 1101 iterations: 1, // Number of playback times. 1102 playMode: PlayMode.Normal, // Animation playback mode. 1103 onFinish: () => { 1104 console.info('play end') 1105 } 1106 }, () => { 1107 this.indicatorWidth = 30 1108 }) 1109 } else { 1110 animateTo({ 1111 duration: 1000, // Animation duration. 1112 curve: Curve.Linear, // Animation curve. 1113 delay: 200, // Animation delay. 1114 iterations: 1, // Number of playback times. 1115 playMode: PlayMode.Normal, // Animation playback mode. 1116 onFinish: () => { 1117 console.info('play end') 1118 } 1119 }, () => { 1120 this.indicatorWidth = 50 1121 }) 1122 } 1123 this.widthFlag = !this.widthFlag 1124 }) 1125 Button("Change Indicator Corner Radius").width('100%').margin({ bottom: '12vp' }) 1126 .onClick((event?: ClickEvent) => { 1127 // Animation configuration for the width and height attributes of the <Button> component 1128 if (this.borderFlag) { 1129 animateTo({ 1130 duration: 1000, // Animation duration. 1131 curve: Curve.Linear, // Animation curve. 1132 delay: 200, // Animation delay. 1133 iterations: 1, // Number of playback times. 1134 playMode: PlayMode.Normal, // Animation playback mode. 1135 onFinish: () => { 1136 console.info('play end') 1137 } 1138 }, () => { 1139 this.indicatorBorderRadius = 0 1140 }) 1141 } else { 1142 animateTo({ 1143 duration: 1000, // Animation duration. 1144 curve: Curve.Linear, // Animation curve. 1145 delay: 200, // Animation delay. 1146 iterations: 1, // Number of playback times. 1147 playMode: PlayMode.Normal, // Animation playback mode. 1148 onFinish: () => { 1149 console.info('play end') 1150 } 1151 }, () => { 1152 this.indicatorBorderRadius = 5 1153 }) 1154 } 1155 this.borderFlag = !this.borderFlag 1156 }) 1157 Button("Change Indicator Spacing").width('100%').margin({ bottom: '12vp' }) 1158 .onClick((event?: ClickEvent) => { 1159 // Animation configuration for the width and height attributes of the <Button> component 1160 if (this.spaceFlag) { 1161 animateTo({ 1162 duration: 1000, // Animation duration. 1163 curve: Curve.Linear, // Animation curve. 1164 delay: 200, // Animation delay. 1165 iterations: 1, // Number of playback times. 1166 playMode: PlayMode.Normal, // Animation playback mode. 1167 onFinish: () => { 1168 console.info('play end') 1169 } 1170 }, () => { 1171 this.indicatorSpace = 20 1172 }) 1173 } else { 1174 animateTo({ 1175 duration: 1000, // Animation duration. 1176 curve: Curve.Linear, // Animation curve. 1177 delay: 200, // Animation delay. 1178 iterations: 1, // Number of playback times. 1179 playMode: PlayMode.Normal, // Animation playback mode. 1180 onFinish: () => { 1181 console.info('play end') 1182 } 1183 }, () => { 1184 this.indicatorSpace = 10 1185 }) 1186 } 1187 this.spaceFlag = !this.spaceFlag 1188 }) 1189 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 1190 TabContent() { 1191 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1192 }.tabBar(SubTabBarStyle.of('pink') 1193 .indicator({ 1194 color: this.indicatorColor, // Indicator color. 1195 height: this.indicatorHeight, // Indicator height. 1196 width: this.indicatorWidth, // Indicator width. 1197 borderRadius: this.indicatorBorderRadius, // Rounded corner radius of the indicator. 1198 marginTop: this.indicatorSpace // Spacing between the indicator and text. 1199 }) 1200 .selectedMode(this.selectedMode) 1201 .board({ borderRadius: this.subTabBorderRadius }) 1202 .labelStyle({}) 1203 ) 1204 1205 TabContent() { 1206 Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp') 1207 }.tabBar('yellow') 1208 1209 TabContent() { 1210 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1211 }.tabBar('blue') 1212 1213 TabContent() { 1214 Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp') 1215 }.tabBar('green') 1216 1217 TabContent() { 1218 Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp') 1219 }.tabBar('gray') 1220 1221 TabContent() { 1222 Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp') 1223 }.tabBar('orange') 1224 } 1225 .vertical(false) 1226 .scrollable(true) 1227 .barMode(BarMode.Scrollable) 1228 .barHeight(140) 1229 .animationDuration(400) 1230 .onChange((index: number) => { 1231 console.info(index.toString()) 1232 }) 1233 .backgroundColor(0xF5F5F5) 1234 .height(320) 1235 }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' }) 1236 } 1237} 1238``` 1239 1240 1241 1242### Example 5: Setting Adaptive Height for Subtab Text 1243 1244This example demonstrates how to achieve adaptive height for subtab text using **heightAdaptivePolicy**. 1245 1246```ts 1247// xxx.ets 1248@Entry 1249@Component 1250struct TabsTextOverflow { 1251 @State message: string = 'Hello World' 1252 private controller: TabsController = new TabsController() 1253 @State subTabOverflowOpaque: boolean = true; 1254 1255 build() { 1256 Column() { 1257 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1258 TabContent() { 1259 Column() { 1260 Text('Use an ellipsis').fontSize(30).fontColor(0xFF000000) 1261 }.width('100%').height('100%').backgroundColor(Color.Pink) 1262 } 1263 .tabBar(SubTabBarStyle.of('Start [Use an ellipsis; Use an ellipsis] End') 1264 .labelStyle({ 1265 overflow: TextOverflow.Ellipsis, 1266 maxLines: 1, 1267 minFontSize: 10, 1268 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 1269 font: { size: 20 } 1270 })) 1271 1272 TabContent() { 1273 Column() { 1274 Text('Scale down and then clip').fontSize(30).fontColor(0xFF000000) 1275 }.width('100%').height('100%').backgroundColor(Color.Pink) 1276 } 1277 .tabBar(SubTabBarStyle.of('Start [Scale down and then clip; Scale down and then clip] End') 1278 .labelStyle({ 1279 overflow: TextOverflow.Clip, 1280 maxLines: 1, 1281 minFontSize: 15, 1282 maxFontSize: 15, 1283 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 1284 font: { size: 20 } 1285 })) 1286 1287 TabContent() { 1288 Column() { 1289 Text('Scale down, start a new line, and then clip').fontSize(30).fontColor(0xFF000000) 1290 }.width('100%').height('100%').backgroundColor(Color.Pink) 1291 } 1292 .tabBar(SubTabBarStyle.of('Start [Scale down, start a new line, and then clip; Scale down, start a new line, and then clip] End') 1293 .labelStyle({ 1294 overflow: TextOverflow.Clip, 1295 maxLines: 2, 1296 minFontSize: 15, 1297 maxFontSize: 15, 1298 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 1299 font: { size: 20 } 1300 })) 1301 1302 TabContent() { 1303 Column() { 1304 Text('Start a new line').fontSize(30).fontColor(0xFF000000) 1305 } 1306 .width('100%').height('100%').backgroundColor(Color.Pink) 1307 }.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') 1308 .labelStyle({ 1309 overflow: TextOverflow.Clip, 1310 maxLines: 10, 1311 minFontSize: 10, 1312 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 1313 font: { size: 20 } 1314 })) 1315 } 1316 .vertical(true).scrollable(true) 1317 .barMode(BarMode.Fixed) 1318 .barHeight(720) 1319 .barWidth(200).animationDuration(400) 1320 .onChange((index: number) => { 1321 console.info(index.toString()) 1322 }) 1323 .height('100%').width('100%') 1324 } 1325 .height('100%') 1326 } 1327} 1328``` 1329 1330 1331 1332### Example 6: Setting Basic Attributes for Bottom Tabs 1333 1334This example demonstrates how to set basic attributes for bottom tabs using **padding**, **verticalAlign**, **layoutMode**, and **symmetricExtensible**. 1335 1336```ts 1337// xxx.ets 1338@Entry 1339@Component 1340struct TabContentExample6 { 1341 private controller: TabsController = new TabsController() 1342 @State text: string = "2" 1343 @State tabPadding: number = 0; 1344 @State symmetricExtensible: boolean = false; 1345 @State layoutMode: LayoutMode = LayoutMode.VERTICAL; 1346 @State verticalAlign: VerticalAlign = VerticalAlign.Center; 1347 1348 build() { 1349 Column() { 1350 Row() { 1351 Button("padding+10 " + this.tabPadding) 1352 .width('47%') 1353 .height(50) 1354 .margin({ top: 5 }) 1355 .onClick((event?: ClickEvent) => { 1356 this.tabPadding += 10 1357 }) 1358 .margin({ right: '6%', bottom: '12vp' }) 1359 Button("padding-10 " + this.tabPadding) 1360 .width('47%') 1361 .height(50) 1362 .margin({ top: 5 }) 1363 .onClick((event?: ClickEvent) => { 1364 this.tabPadding -= 10 1365 }) 1366 .margin({ bottom: '12vp' }) 1367 } 1368 1369 Row() { 1370 Button("Add Text") 1371 .width('47%') 1372 .height(50) 1373 .margin({ top: 5 }) 1374 .onClick((event?: ClickEvent) => { 1375 this.text += 'Add Text' 1376 }) 1377 .margin({ right: '6%', bottom: '12vp' }) 1378 Button("Reset Text") 1379 .width('47%') 1380 .height(50) 1381 .margin({ top: 5 }) 1382 .onClick((event?: ClickEvent) => { 1383 this.text = "2" 1384 }) 1385 .margin({ bottom: '12vp' }) 1386 } 1387 1388 Row() { 1389 Button("Set SymmetricExtensible to " + this.symmetricExtensible) 1390 .width('100%') 1391 .height(50) 1392 .margin({ top: 5 }) 1393 .onClick((event?: ClickEvent) => { 1394 this.symmetricExtensible = !this.symmetricExtensible 1395 }) 1396 .margin({ bottom: '12vp' }) 1397 } 1398 1399 Row() { 1400 Button("Vertical Layout") 1401 .width('47%') 1402 .height(50) 1403 .margin({ top: 5 }) 1404 .onClick((event?: ClickEvent) => { 1405 this.layoutMode = LayoutMode.VERTICAL; 1406 }) 1407 .margin({ right: '6%', bottom: '12vp' }) 1408 Button("Horizontal Layout") 1409 .width('47%') 1410 .height(50) 1411 .margin({ top: 5 }) 1412 .onClick((event?: ClickEvent) => { 1413 this.layoutMode = LayoutMode.HORIZONTAL; 1414 }) 1415 .margin({ bottom: '12vp' }) 1416 } 1417 1418 Row() { 1419 Button("VerticalAlign.Top") 1420 .width('100%') 1421 .height(50) 1422 .margin({ top: 5 }) 1423 .onClick((event?: ClickEvent) => { 1424 this.verticalAlign = VerticalAlign.Top; 1425 }) 1426 .margin({ bottom: '12vp' }) 1427 } 1428 1429 Row() { 1430 Button("VerticalAlign.Center") 1431 .width('100%') 1432 .height(50) 1433 .margin({ top: 5 }) 1434 .onClick((event?: ClickEvent) => { 1435 this.verticalAlign = VerticalAlign.Center; 1436 }) 1437 .margin({ bottom: '12vp' }) 1438 } 1439 1440 Row() { 1441 Button("VerticalAlign.Bottom") 1442 .width('100%') 1443 .height(50) 1444 .margin({ top: 5 }) 1445 .onClick((event?: ClickEvent) => { 1446 this.verticalAlign = VerticalAlign.Bottom; 1447 }) 1448 .margin({ bottom: '12vp' }) 1449 } 1450 1451 1452 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 1453 TabContent() { 1454 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1455 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1")) 1456 1457 TabContent() { 1458 Column().width('100%').height('100%').backgroundColor(Color.Green) 1459 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text) 1460 .padding(this.tabPadding) 1461 .verticalAlign(this.verticalAlign) 1462 .layoutMode(this.layoutMode) 1463 .symmetricExtensible(this.symmetricExtensible)) 1464 1465 TabContent() { 1466 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1467 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3")) 1468 } 1469 .animationDuration(300) 1470 .height('60%') 1471 .backgroundColor(0xf1f3f5) 1472 .barMode(BarMode.Fixed) 1473 } 1474 .width('100%') 1475 .height(500) 1476 .margin({ top: 5 }) 1477 .padding('24vp') 1478 } 1479} 1480``` 1481 1482 1483 1484### Example 7: Setting Text and Icon Colors for Subtabs and Bottom Tabs 1485 1486This example demonstrates how to change the text color of subtabs and bottom tabs using **unselectedColor** and **selectedColor** in **labelStyle** and how to change the icon color of bottom tabs using **unselectedColor** and **selectedColor** in **iconStyle**. 1487 1488```ts 1489// xxx.ets 1490@Entry 1491@Component 1492struct TabBarStyleExample { 1493 build() { 1494 Column({ space: 5 }) { 1495 Text("Subtab style") 1496 Column() { 1497 Tabs({ barPosition: BarPosition.Start }) { 1498 TabContent() { 1499 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1500 }.tabBar(new SubTabBarStyle('Pink') 1501 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1502 1503 TabContent() { 1504 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1505 }.tabBar(new SubTabBarStyle('Yellow') 1506 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1507 1508 TabContent() { 1509 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1510 }.tabBar(new SubTabBarStyle('Blue') 1511 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1512 1513 TabContent() { 1514 Column().width('100%').height('100%').backgroundColor(Color.Green) 1515 }.tabBar(new SubTabBarStyle('Green') 1516 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1517 ) 1518 } 1519 .vertical(false) 1520 .scrollable(true) 1521 .barMode(BarMode.Fixed) 1522 .onChange((index: number) => { 1523 console.info(index.toString()) 1524 }) 1525 .width('100%') 1526 .backgroundColor(0xF1F3F5) 1527 }.width('100%').height(200) 1528 1529 Text("Bottom tab style") 1530 Column() { 1531 Tabs({ barPosition: BarPosition.End }) { 1532 TabContent() { 1533 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1534 } 1535 .tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'pink') 1536 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1537 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1538 ) 1539 1540 TabContent() { 1541 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1542 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Yellow') 1543 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1544 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1545 ) 1546 1547 TabContent() { 1548 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1549 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Blue') 1550 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1551 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1552 ) 1553 1554 TabContent() { 1555 Column().width('100%').height('100%').backgroundColor(Color.Green) 1556 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Green') 1557 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1558 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1559 ) 1560 } 1561 .vertical(false) 1562 .scrollable(true) 1563 .barMode(BarMode.Fixed) 1564 .onChange((index: number) => { 1565 console.info(index.toString()) 1566 }) 1567 .width('100%') 1568 .backgroundColor(0xF1F3F5) 1569 }.width('100%').height(200) 1570 } 1571 } 1572} 1573``` 1574 1575 1576 1577### Example 8 (customized subtabs) 1578 1579This example sets **SubTabBarStyle** through **ComponentContent**. 1580 1581```ts 1582// xxx.ets 1583import { ComponentContent, UIContext } from "@kit.ArkUI"; 1584 1585class Params { 1586 text: string = "" 1587 1588 constructor(text: string) { 1589 this.text = text; 1590 } 1591} 1592 1593@Builder 1594function buildText(params: Params) { 1595 Column() { 1596 Text(params.text) 1597 .fontSize(20) 1598 .fontWeight(FontWeight.Bold) 1599 .margin(20) 1600 } 1601} 1602 1603@Entry 1604@Component 1605struct Index { 1606 @State message1: string = "tabBar1" 1607 @State message2: string = "tabBar2" 1608 context: UIContext = this.getUIContext() 1609 private count1 = 0; 1610 private count2 = 0; 1611 private controller: TabsController = new TabsController(); 1612 tabBar1: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message1)); 1613 tabBar2: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message2)); 1614 1615 build() { 1616 Row() { 1617 Column() { 1618 Button("Update tabBar1").width('90%').margin(20) 1619 .onClick((event?: ClickEvent) => { 1620 this.count1 += 1; 1621 const message1 = "Update 1_" + this.count1.toString(); 1622 this.tabBar1.update(new Params(message1)); 1623 }) 1624 Button("Update tabBar2").width('90%').margin(20) 1625 .onClick((event?: ClickEvent) => { 1626 this.count2 += 1; 1627 const message2 = "Update 2_" + this.count2.toString(); 1628 this.tabBar2.update(new Params(message2)); 1629 }) 1630 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1631 TabContent() { 1632 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1633 }.tabBar(new SubTabBarStyle(this.tabBar1)) 1634 TabContent() { 1635 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1636 }.tabBar(SubTabBarStyle.of(this.tabBar2)) 1637 } 1638 .vertical(false) 1639 .barWidth(414) 1640 .barHeight(96) 1641 .width(414) 1642 .height(414) 1643 .backgroundColor('#F1F3F5') 1644 .margin({ top: 20 }) 1645 } 1646 .width('100%') 1647 .height('100%') 1648 } 1649 .height('100%') 1650 } 1651} 1652``` 1653 1654 1655 1656### Example 9: Using Symbol Icons for Bottom Tabs 1657 1658This example shows how to use symbols as icons in **BottomTabBarStyle**. 1659 1660```ts 1661// xxx.ets 1662import { SymbolGlyphModifier } from '@kit.ArkUI'; 1663 1664@Entry 1665@Component 1666struct Index { 1667 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 1668 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ellipsis_bubble')); 1669 @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.dot_video')); 1670 @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')); 1671 build() { 1672 Column({space: 5}) { 1673 Text("Bottom tab style") 1674 Column(){ 1675 Tabs({barPosition: BarPosition.End}) { 1676 TabContent() { 1677 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1678 }.tabBar(new BottomTabBarStyle({ 1679 normal: this.symbolModifier1, 1680 }, 'Pink')) 1681 .onWillShow(() => { 1682 console.info("Pink will show") 1683 }) 1684 .onWillHide(() => { 1685 console.info("Pink will hide") 1686 }) 1687 1688 TabContent() { 1689 Column().width('100%').height('100%').backgroundColor(Color.Orange) 1690 }.tabBar(new BottomTabBarStyle({ 1691 normal: this.symbolModifier2, 1692 }, 'Orange')) 1693 .onWillShow(() => { 1694 console.info("Orange will show") 1695 }) 1696 .onWillHide(() => { 1697 console.info("Orange will hide") 1698 }) 1699 1700 TabContent() { 1701 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1702 }.tabBar(new BottomTabBarStyle({ 1703 normal: this.symbolModifier3, 1704 }, 'Blue')) 1705 .onWillShow(() => { 1706 console.info("Blue will show") 1707 }) 1708 .onWillHide(() => { 1709 console.info("Blue will hide") 1710 }) 1711 1712 TabContent() { 1713 Column().width('100%').height('100%').backgroundColor(Color.Green) 1714 }.tabBar(new BottomTabBarStyle({ 1715 normal: this.symbolModifier4, 1716 }, 'Green')) 1717 .onWillShow(() => { 1718 console.info("Green will show") 1719 }) 1720 .onWillHide(() => { 1721 console.info("Green will hide") 1722 }) 1723 } 1724 .vertical(false) 1725 .scrollable(true) 1726 .barMode(BarMode.Fixed) 1727 .onChange((index:number)=>{ 1728 console.info(index.toString()) 1729 }) 1730 .width('100%') 1731 .backgroundColor(0xF1F3F5) 1732 }.width('100%').height(200) 1733 } 1734 } 1735} 1736``` 1737 1738 1739
