1# TabContent 2 3仅在Tabs中使用，对应一个切换页签的内容视图。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12支持单个子组件。 13 14> **说明：** 15> 16> 可内置系统组件和自定义组件，支持渲染控制类型（[if/else](../../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)）。 17 18 19## 接口 20 21TabContent() 22 23**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27## 属性 28 29除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 30 31### tabBar 32 33tabBar(value: string | Resource | CustomBuilder | { icon?: string | Resource; text?: string | Resource }) 34 35设置TabBar上显示内容。 36 37如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 38 39设置的内容超出tabbar页签时进行裁切。 40 41**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 42 43**系统能力：** SystemCapability.ArkUI.ArkUI.Full 44 45**参数：** 46 47| 参数名 | 类型 | 必填 | 说明 | 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/>} | 是 | TabBar上显示内容。<br/>CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。 | 50 51### tabBar<sup>9+</sup> 52 53tabBar(value: SubTabBarStyle | BottomTabBarStyle) 54 55设置TabBar上显示内容。底部样式没有下划线效果。icon异常时显示灰色图块。 56 57**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 58 59**系统能力：** SystemCapability.ArkUI.ArkUI.Full 60 61**参数：** 62 63| 参数名 | 类型 | 必填 | 说明 | 64| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 65| value | [SubTabBarStyle](#subtabbarstyle9对象说明) \| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 是 | TabBar上显示内容。<br/>SubTabBarStyle: 子页签样式。<br/>BottomTabBarStyle: 底部页签和侧边页签样式。 | 66 67> **说明：** 68> 69> - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 70> - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。 71> - vertical属性为false值，交换上述2个限制。 72> - TabContent组件不支持内容过长时页面的滑动，如需页面滑动，可嵌套List使用。 73 74## SubTabBarStyle<sup>9+</sup>对象说明 75 76子页签样式。打开后在切换页签时会播放跳转动画。 77 78### constructor 79 80constructor(content: ResourceStr) 81 82SubTabBarStyle的构造函数。 83 84**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88**参数：** 89 90| 参数名 | 类型 | 必填 | 说明 | 91| -------- | -------- | -------- | -------- | 92| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 93 94### constructor<sup>12+</sup> 95 96constructor(content: ResourceStr | ComponentContent) 97 98SubTabBarStyle的构造函数。支持ComponentContent设置自定义内容。 99 100**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 101 102**系统能力：** SystemCapability.ArkUI.ArkUI.Full 103 104**参数：** 105 106| 参数名 | 类型 | 必填 | 说明 | 107| -------- | -------- | -------- | -------- | 108| content | [ResourceStr](ts-types.md#resourcestr) \| [ComponentContent](../js-apis-arkui-ComponentContent.md) | 是 | 页签内的内容。<br />**说明：**<br />1.自定义内容不支持labelStyle属性。<br />2.自定义内容超出页签范围，则不显示超出部分。<br />3.自定义内容小于页签范围，则会居中对齐。<br />4.自定义内容异常或无可用显示组件，则显示空白。 | 109 110### of<sup>10+</sup> 111 112static of(content: ResourceStr): SubTabBarStyle 113 114SubTabBarStyle的静态构造函数。 115 116**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 117 118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 119 120**参数：** 121 122| 参数名 | 类型 | 必填 | 说明 | 123| ------- | ------------------------------------------ | ---- | ------------------ | 124| content | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 125 126**返回值：** 127 128| 类型 | 说明 | 129| ------- | ------------------------------------------------------------ | 130| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回创建的SubTabBarStyle对象。 | 131 132### of<sup>12+</sup> 133 134static of(content: ResourceStr | ComponentContent): SubTabBarStyle 135 136SubTabBarStyle的静态构造函数。 137 138**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 139 140**系统能力：** SystemCapability.ArkUI.ArkUI.Full 141 142**参数：** 143 144| 参数名 | 类型 | 必填 | 说明 | 145| ------- | ------------------------------------------ | ---- | ------------------ | 146| content | [ResourceStr](ts-types.md#resourcestr) \| [ComponentContent](../js-apis-arkui-ComponentContent.md) | 是 | 页签内的内容。支持ComponentContent设置自定义内容。<br />**说明：**<br />1.自定义内容不支持labelStyle属性。<br />2.自定义内容超出页签范围，则不显示超出部分。<br />3.自定义内容小于页签范围，则会居中对齐。<br />4.自定义内容异常或无可用显示组件，则显示空白。 | 147 148**返回值：** 149 150| 类型 | 说明 | 151| ------- | ------------------------------------------------------------ | 152| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回创建的SubTabBarStyle对象。 | 153 154### indicator<sup>10+</sup> 155 156indicator(value: IndicatorStyle): SubTabBarStyle 157 158设置选中子页签的下划线风格。子页签的下划线风格仅在水平模式下有效。 159 160**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 161 162**系统能力：** SystemCapability.ArkUI.ArkUI.Full 163 164**参数：** 165 166| 参数名 | 类型 | 必填 | 说明 | 167| ------- | ------------------------------------- | ---- | ------------- | 168| value | [IndicatorStyle](#indicatorstyle10对象说明) | 是 | 选中子页签的下划线风格对象。 | 169 170**返回值：** 171 172| 类型 | 说明 | 173| ------- | ------------------------------------------------------------ | 174| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回SubTabBarStyle对象本身。 | 175 176### selectedMode<sup>10+</sup> 177 178selectedMode(value: SelectedMode): SubTabBarStyle 179 180设置选中子页签的显示方式。子页签的显示方式仅在水平模式下有效。 181 182**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 183 184**系统能力：** SystemCapability.ArkUI.ArkUI.Full 185 186**参数：** 187 188| 参数名 | 类型 | 必填 | 说明 | 189| ------- | ------------------------------------- | ---- | ------------- | 190| value | [SelectedMode](#selectedmode10枚举说明) | 是 | 选中子页签的显示方式。<br />默认值：SelectedMode.INDICATOR | 191 192**返回值：** 193 194| 类型 | 说明 | 195| ------- | ------------------------------------------------------------ | 196| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回SubTabBarStyle对象本身。 | 197 198### board<sup>10+</sup> 199 200board(value: BoardStyle): SubTabBarStyle 201 202设置选中子页签的背板风格。子页签的背板风格仅在水平模式下有效。 203 204**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 205 206**系统能力：** SystemCapability.ArkUI.ArkUI.Full 207 208**参数：** 209 210| 参数名 | 类型 | 必填 | 说明 | 211| ------- | ------------------------------------- | ---- | ------------- | 212| value | [BoardStyle](#boardstyle10对象说明) | 是 | 选中子页签的背板风格对象。 | 213 214**返回值：** 215 216| 类型 | 说明 | 217| ------- | ------------------------------------------------------------ | 218| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回SubTabBarStyle对象本身。 | 219 220### labelStyle<sup>10+</sup> 221 222labelStyle(value: LabelStyle): SubTabBarStyle 223 224设置子页签的label文本和字体的样式。 225 226**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 227 228**系统能力：** SystemCapability.ArkUI.ArkUI.Full 229 230**参数：** 231 232| 参数名 | 类型 | 必填 | 说明 | 233| ------- | ------------------------------------- | ---- | ------------- | 234| value | [LabelStyle](#labelstyle10对象说明) | 是 | 子页签的label文本和字体的样式对象。 | 235 236**返回值：** 237 238| 类型 | 说明 | 239| ------- | ------------------------------------------------------------ | 240| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回SubTabBarStyle对象本身。 | 241 242### padding<sup>10+</sup> 243 244padding(value: Padding | Dimension): SubTabBarStyle 245 246设置子页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。 247 248**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 249 250**系统能力：** SystemCapability.ArkUI.ArkUI.Full 251 252**参数：** 253 254| 参数名 | 类型 | 必填 | 说明 | 255| ------- | ------------------------------------- | ---- | ------------- | 256| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 是 | 子页签的内边距属性。<br />默认值：{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp} | 257 258**返回值：** 259 260| 类型 | 说明 | 261| ------- | ------------------------------------------------------------ | 262| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回SubTabBarStyle对象本身。 | 263 264### padding<sup>12+</sup> 265 266padding(padding: LocalizedPadding): SubTabBarStyle 267 268设置子页签的内边距属性，支持镜像能力（不支持百分比设置）。 269 270**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 271 272**系统能力：** SystemCapability.ArkUI.ArkUI.Full 273 274**参数：** 275 276| 参数名 | 类型 | 必填 | 说明 | 277| ------- | ------------------------------------- | ---- | ------------- | 278| padding | [LocalizedPadding](ts-types.md#localizedpadding12) | 是 | 子页签的内边距属性。<br />默认值：{start:LengthMetircs.vp(8),end:LengthMetircs.vp(8),<br/>top:LengthMetircs.vp(17),bottom:LengthMetircs.vp(18)} | 279 280**返回值：** 281 282| 类型 | 说明 | 283| ------- | ------------------------------------------------------------ | 284| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回SubTabBarStyle对象本身。 | 285 286### id<sup>11+</sup> 287 288id(value: string): SubTabBarStyle 289 290设置子页签的[id](ts-universal-attributes-component-id.md#属性)。 291 292**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 293 294**系统能力：** SystemCapability.ArkUI.ArkUI.Full 295 296**参数：** 297 298| 参数名 | 类型 | 必填 | 说明 | 299| ------- | ------------------------------------- | ---- | ------------- | 300| value | string | 是 | 子页签的[id](ts-universal-attributes-component-id.md#属性)。 | 301 302**返回值：** 303 304| 类型 | 说明 | 305| ------- | ------------------------------------------------------------ | 306| [SubTabBarStyle](#subtabbarstyle9对象说明) | 返回SubTabBarStyle对象本身。 | 307 308## IndicatorStyle<sup>10+</sup>对象说明 309 310**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 311 312**系统能力：** SystemCapability.ArkUI.ArkUI.Full 313 314| 名称 | 类型 | 必填 | 说明 | 315| -------- | -------- | -------- | -------------------------------- | 316| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下划线的颜色和背板颜色。<br/>默认值:#FF007DFF | 317| height | [Length](ts-types.md#length) | 否 | 下划线的高度（不支持百分比设置）。<br/>默认值:2.0<br/>单位：vp | 318| width | [Length](ts-types.md#length) | 否 | 下划线的宽度（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp <br/>**说明：** <br/>宽度设置为0时，按页签文本宽度显示。| 319| borderRadius | [Length](ts-types.md#length) | 否 | 下划线的圆角半径（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp | 320| marginTop | [Length](ts-types.md#length) | 否 | 下划线与文字的间距（不支持百分比设置）。<br/>默认值：8.0<br/>单位：vp | 321 322## SelectedMode<sup>10+</sup>枚举说明 323 324**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 325 326**系统能力：** SystemCapability.ArkUI.ArkUI.Full 327 328| 名称 | 说明 | 329| ---------- | ------------------------ | 330| INDICATOR | 使用下划线模式。 | 331| BOARD | 使用背板模式。 | 332 333## BoardStyle<sup>10+</sup>对象说明 334 335**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 336 337**系统能力：** SystemCapability.ArkUI.ArkUI.Full 338 339| 名称 | 类型 | 必填 | 说明 | 340| -------- | -------- | -------- | ------------------------------------ | 341| borderRadius | [Length](ts-types.md#length) | 否 | 背板的圆角半径（不支持百分比设置）。<br/>默认值：8.0<br/>单位：vp | 342 343## LabelStyle<sup>10+</sup>对象说明 344 345**系统能力：** SystemCapability.ArkUI.ArkUI.Full 346 347| 名称 | 类型 | 必填 | 说明 | 348| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 349| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | 否 | 设置Label文本超长时的显示方式。默认值是省略号截断。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 350| maxLines | number | 否 | 设置Label文本的最大行数。如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过textOverflow来指定截断方式。默认值是1。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 351| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最小显示字号（不支持百分比设置）。需配合maxFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 352| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | 否 | 设置Label文本最大显示字号（不支持百分比设置）。需配合minFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 353| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 否 | 设置Label文本自适应高度的方式。默认值是最大行数优先。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 354| font | [Font](ts-types.md#font) | 否 | 设置Label文本字体样式。<br/>当页签为子页签时，默认值是字体大小16.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重正常。<br/>当页签为底部页签时，默认值是字体大小10.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重中等。<br/>从API version 12开始，底部页签页签内容左右排布时默认字体大小为12.0fp。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 355| unselectedColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label文本字体未选中时的颜色。<br/>默认值:#99182431 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 356| selectedColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label文本字体选中时的颜色。<br/>默认值:#FF007DFF <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 357 358## BottomTabBarStyle<sup>9+</sup>对象说明 359 360底部页签和侧边页签样式。 361 362### constructor 363 364constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr) 365 366BottomTabBarStyle的构造函数。 367 368**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 369 370**系统能力：** SystemCapability.ArkUI.ArkUI.Full 371 372**参数：** 373 374| 参数名 | 类型 | 必填 | 说明 | 375| -------- | -------- | -------- | -------- | 376| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12对象说明) | 是 | 页签内的图片内容。 | 377| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 378 379### of<sup>10+</sup> 380 381static of(icon: ResourceStr | TabBarSymbol, text: ResourceStr): BottomTabBarStyle 382 383BottomTabBarStyle的静态构造函数。 384 385**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 386 387**系统能力：** SystemCapability.ArkUI.ArkUI.Full 388 389**参数：** 390 391| 参数名 | 类型 | 必填 | 说明 | 392| -------- | -------- | -------- | -------- | 393| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol<sup>12+</sup>](#tabbarsymbol12对象说明) | 是 | 页签内的图片内容。 | 394| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 395 396**返回值：** 397 398| 类型 | 说明 | 399| ------- | ------------------------------------------------------------ | 400| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回创建的BottomTabBarStyle对象。 | 401 402### padding<sup>10+</sup> 403 404padding(value: Padding | Dimension | LocalizedPadding): BottomTabBarStyle 405 406设置底部页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。 407 408**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 409 410**系统能力：** SystemCapability.ArkUI.ArkUI.Full 411 412**参数：** 413 414| 参数名 | 类型 | 必填 | 说明 | 415| ------- | ------------------------------------- | ---- | ------------- | 416| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) \| [LocalizedPadding<sup>12+</sup>](ts-types.md#localizedpadding12) | 是 | 底部页签的内边距。<br/>默认值：{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp}<br/>使用LocalizedPadding时，支持镜像能力。<br />默认值：{start:LengthMetircs.vp(4),end:LengthMetircs.vp(4),<br/>top:LengthMetircs.vp(0),bottom:LengthMetircs.vp(0)} | 417 418**返回值：** 419 420| 类型 | 说明 | 421| ------- | ------------------------------------------------------------ | 422| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回BottomTabBarStyle对象本身。 | 423 424### verticalAlign<sup>10+</sup> 425 426verticalAlign(value: VerticalAlign): BottomTabBarStyle 427 428设置底部页签的图片、文字在垂直方向上的对齐格式。 429 430**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 431 432**系统能力：** SystemCapability.ArkUI.ArkUI.Full 433 434**参数：** 435 436| 参数名 | 类型 | 必填 | 说明 | 437| ------- | ------------------------------------- | ---- | ------------- | 438| value | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 是 | 底部页签的图片、文字在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center | 439 440**返回值：** 441 442| 类型 | 说明 | 443| ------- | ------------------------------------------------------------ | 444| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回BottomTabBarStyle对象本身。 | 445 446### layoutMode<sup>10+</sup> 447 448layoutMode(value: LayoutMode): BottomTabBarStyle 449 450设置底部页签的图片、文字排布的方式。 451 452**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 453 454**系统能力：** SystemCapability.ArkUI.ArkUI.Full 455 456**参数：** 457 458| 参数名 | 类型 | 必填 | 说明 | 459| ------- | ------------------------------------- | ---- | ------------- | 460| value | [LayoutMode](#layoutmode10枚举说明) | 是 | 底部页签的图片、文字排布的方式，具体参照LayoutMode枚举。<br/>默认值：LayoutMode.VERTICAL | 461 462**返回值：** 463 464| 类型 | 说明 | 465| ------- | ------------------------------------------------------------ | 466| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回BottomTabBarStyle对象本身。 | 467 468### symmetricExtensible<sup>10+</sup> 469 470symmetricExtensible(value: boolean): BottomTabBarStyle 471 472设置底部页签的图片、文字是否可以对称借左右底部页签的空余位置中的最小值，仅fixed水平模式下在底部页签之间有效。 473 474**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 475 476**系统能力：** SystemCapability.ArkUI.ArkUI.Full 477 478**参数：** 479 480| 参数名 | 类型 | 必填 | 说明 | 481| ------- | ------------------------------------- | ---- | ------------- | 482| value | boolean | 是 | 底部页签的图片、文字是否可以对称借左右底部页签的空余位置中的最小值。<br/>默认值：false | 483 484**返回值：** 485 486| 类型 | 说明 | 487| ------- | ------------------------------------------------------------ | 488| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回BottomTabBarStyle对象本身。 | 489 490### labelStyle<sup>10+</sup> 491 492labelStyle(value: LabelStyle): BottomTabBarStyle 493 494设置底部页签的label文本和字体的样式。 495 496**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 497 498**系统能力：** SystemCapability.ArkUI.ArkUI.Full 499 500**参数：** 501 502| 参数名 | 类型 | 必填 | 说明 | 503| ------- | ------------------------------------- | ---- | ------------- | 504| value | [LabelStyle](#labelstyle10对象说明) | 是 | 底部页签的label文本和字体的样式。 | 505 506**返回值：** 507 508| 类型 | 说明 | 509| ------- | ------------------------------------------------------------ | 510| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回BottomTabBarStyle对象本身。 | 511 512### id<sup>11+</sup> 513 514id(value: string): BottomTabBarStyle 515 516设置底部页签的id。 517 518**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 519 520**系统能力：** SystemCapability.ArkUI.ArkUI.Full 521 522**参数：** 523 524| 参数名 | 类型 | 必填 | 说明 | 525| ------- | ------------------------------------- | ---- | ------------- | 526| value | string | 是 | 设置底部页签的[id](ts-universal-attributes-component-id.md#属性)。 | 527 528**返回值：** 529 530| 类型 | 说明 | 531| ------- | ------------------------------------------------------------ | 532| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回BottomTabBarStyle对象本身。 | 533 534### iconStyle<sup>12+</sup> 535 536iconStyle(style: TabBarIconStyle): BottomTabBarStyle 537 538置底部页签的label图标的样式。 539 540**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 541 542**系统能力：** SystemCapability.ArkUI.ArkUI.Full 543 544**参数：** 545 546| 参数名 | 类型 | 必填 | 说明 | 547| ------- | ------------------------------------- | ---- | ------------- | 548| style | [TabBarIconStyle](#tabbariconstyle12对象说明) | 是 | 底部页签的label图标的样式。 | 549 550**返回值：** 551 552| 类型 | 说明 | 553| ------- | ------------------------------------------------------------ | 554| [BottomTabBarStyle](#bottomtabbarstyle9对象说明) | 返回BottomTabBarStyle对象本身。 | 555 556## TabBarSymbol<sup>12+</sup>对象说明 557 558**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 559 560**系统能力：** SystemCapability.ArkUI.ArkUI.Full 561 562| 名称 | 类型 | 必填 | 说明 | 563| -------- | -------- | -------- | -------- | 564| normal | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 是 | 页签内symbol图标普通态样式。<br/>默认值：fontColor：#66182431，renderingStrategy：SymbolRenderingStrategy.MULTIPLE_OPACITY，fontSize：24vp | 565| selected | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 页签内symbol图标选中态样式。<br/>默认值：fontColor：#ff007dff，renderingStrategy：SymbolRenderingStrategy.MULTIPLE_OPACITY，fontSize：24vp | 566 567## LayoutMode<sup>10+</sup>枚举说明 568 569**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 570 571**系统能力：** SystemCapability.ArkUI.ArkUI.Full 572 573| 名称 | 说明 | 574| ---------- | ---------------------------------------- | 575| AUTO | 若页签宽度大于104vp，页签内容为左右排布，否则页签内容为上下排布。仅TabBar为垂直模式或Fixed水平模式时有效。 | 576| VERTICAL | 页签内容上下排布。 | 577| HORIZONTAL | 页签内容左右排布。 | 578 579## TabBarIconStyle<sup>12+</sup>对象说明 580 581**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 582 583**系统能力：** SystemCapability.ArkUI.ArkUI.Full 584 585| 名称 | 类型 | 必填 | 说明 | 586| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 587| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label图标未选中时的颜色。<br/>默认值:#33182431 <br/>**说明：** <br/>仅对svg图源生效，设置后会替换svg图片的填充颜色。 | 588| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Label图标选中时的颜色。<br/>默认值:#FF007DFF <br/>**说明：** <br/>仅对svg图源生效，设置后会替换svg图片的填充颜色。 | 589 590## 事件 591 592除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 593 594### onWillShow<sup>12+</sup> 595 596onWillShow(event: VoidCallback) 597 598逻辑回调，TabContent将要显示的时候触发该回调。场景包括TabContent首次显示，TabContent切换，页面切换，窗口前后台切换。 599 600**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 601 602**系统能力：** SystemCapability.ArkUI.ArkUI.Full 603 604**参数：** 605 606| 参数名 | 类型 | 必填 | 说明 | 607| ------ | --------------------------------------------- | ---- | ----------------------------------- | 608| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | TabContent将要显示的回调函数。 | 609 610### onWillHide<sup>12+</sup> 611 612onWillHide(event: VoidCallback) 613 614逻辑回调，TabContent将要隐藏的时候触发该回调。场景包括TabContent切换，页面切换，窗口前后台切换。 615 616**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 617 618**系统能力：** SystemCapability.ArkUI.ArkUI.Full 619 620**参数：** 621 622| 参数名 | 类型 | 必填 | 说明 | 623| ------ | --------------------------------------------- | ---- | ----------------------------------- | 624| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | TabContent将要隐藏的回调函数。 | 625 626## 示例 627 628### 示例1 629 630```ts 631// xxx.ets 632@Entry 633@Component 634struct TabContentExample { 635 @State fontColor: string = '#182431' 636 @State selectedFontColor: string = '#007DFF' 637 @State currentIndex: number = 0 638 @State selectedIndex: number = 0 639 private controller: TabsController = new TabsController() 640 641 @Builder tabBuilder(index: number) { 642 Column() { 643 Image(this.selectedIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 644 .width(24) 645 .height(24) 646 .margin({ bottom: 4 }) 647 .objectFit(ImageFit.Contain) 648 Text(`Tab${index + 1}`) 649 .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) 650 .fontSize(10) 651 .fontWeight(500) 652 .lineHeight(14) 653 }.width('100%') 654 } 655 656 build() { 657 Column() { 658 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 659 TabContent() { 660 Column() { 661 Text('Tab1') 662 .fontSize(36) 663 .fontColor('#182431') 664 .fontWeight(500) 665 .opacity(0.4) 666 .margin({ top: 30, bottom: 56.5 }) 667 Divider() 668 .strokeWidth(0.5) 669 .color('#182431') 670 .opacity(0.05) 671 }.width('100%') 672 }.tabBar(this.tabBuilder(0)) 673 674 TabContent() { 675 Column() { 676 Text('Tab2') 677 .fontSize(36) 678 .fontColor('#182431') 679 .fontWeight(500) 680 .opacity(0.4) 681 .margin({ top: 30, bottom: 56.5 }) 682 Divider() 683 .strokeWidth(0.5) 684 .color('#182431') 685 .opacity(0.05) 686 }.width('100%') 687 }.tabBar(this.tabBuilder(1)) 688 689 TabContent() { 690 Column() { 691 Text('Tab3') 692 .fontSize(36) 693 .fontColor('#182431') 694 .fontWeight(500) 695 .opacity(0.4) 696 .margin({ top: 30, bottom: 56.5 }) 697 Divider() 698 .strokeWidth(0.5) 699 .color('#182431') 700 .opacity(0.05) 701 }.width('100%') 702 }.tabBar(this.tabBuilder(2)) 703 704 TabContent() { 705 Column() { 706 Text('Tab4') 707 .fontSize(36) 708 .fontColor('#182431') 709 .fontWeight(500) 710 .opacity(0.4) 711 .margin({ top: 30, bottom: 56.5 }) 712 Divider() 713 .strokeWidth(0.5) 714 .color('#182431') 715 .opacity(0.05) 716 }.width('100%') 717 }.tabBar(this.tabBuilder(3)) 718 } 719 .vertical(false) 720 .barHeight(56) 721 .onChange((index: number) => { 722 // currentIndex控制TabContent显示页签 723 this.currentIndex = index 724 }) 725 .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { 726 if (index === targetIndex) { 727 return 728 } 729 // selectedIndex控制自定义TabBar内Image和Text颜色切换 730 this.selectedIndex = targetIndex 731 }) 732 .width(360) 733 .height(190) 734 .backgroundColor('#F1F3F5') 735 .margin({ top: 38 }) 736 }.width('100%') 737 } 738} 739``` 740 741 742 743### 示例2 744 745```ts 746// xxx.ets 747@Entry 748@Component 749struct TabContentExample { 750 @State fontColor: string = '#182431' 751 @State selectedFontColor: string = '#007DFF' 752 @State currentIndex: number = 0 753 @State selectedIndex: number = 0 754 private controller: TabsController = new TabsController() 755 756 @Builder tabBuilder(index: number) { 757 Column() { 758 Image(this.selectedIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') 759 .width(24) 760 .height(24) 761 .margin({ bottom: 4 }) 762 .objectFit(ImageFit.Contain) 763 Text('Tab') 764 .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor) 765 .fontSize(10) 766 .fontWeight(500) 767 .lineHeight(14) 768 }.width('100%').height('100%').justifyContent(FlexAlign.Center) 769 } 770 771 build() { 772 Column() { 773 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 774 TabContent() 775 .tabBar(this.tabBuilder(0)) 776 TabContent() 777 .tabBar(this.tabBuilder(1)) 778 TabContent() 779 .tabBar(this.tabBuilder(2)) 780 TabContent() 781 .tabBar(this.tabBuilder(3)) 782 } 783 .vertical(true) 784 .barWidth(96) 785 .barHeight(414) 786 .onChange((index: number) => { 787 // currentIndex控制TabContent显示页签 788 this.currentIndex = index 789 }) 790 .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => { 791 if (index === targetIndex) { 792 return 793 } 794 // selectedIndex控制自定义TabBar内Image和Text颜色切换 795 this.selectedIndex = targetIndex 796 }) 797 .width(96) 798 .height(414) 799 .backgroundColor('#F1F3F5') 800 .margin({ top: 52 }) 801 }.width('100%') 802 } 803} 804``` 805 806 807 808### 示例3 809 810```ts 811// xxx.ets 812@Entry 813@Component 814struct TabBarStyleExample { 815 build() { 816 Column({ space: 5 }) { 817 Text("子页签样式") 818 Column() { 819 Tabs({ barPosition: BarPosition.Start }) { 820 TabContent() { 821 Column().width('100%').height('100%').backgroundColor(Color.Pink) 822 }.tabBar(new SubTabBarStyle('Pink')) 823 .onWillShow(() => { 824 console.info("Pink will show") 825 }) 826 .onWillHide(() => { 827 console.info("Pink will hide") 828 }) 829 830 TabContent() { 831 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 832 }.tabBar(new SubTabBarStyle('Yellow')) 833 .onWillShow(() => { 834 console.info("Yellow will show") 835 }) 836 .onWillHide(() => { 837 console.info("Yellow will hide") 838 }) 839 840 TabContent() { 841 Column().width('100%').height('100%').backgroundColor(Color.Blue) 842 }.tabBar(new SubTabBarStyle('Blue')) 843 .onWillShow(() => { 844 console.info("Blue will show") 845 }) 846 .onWillHide(() => { 847 console.info("Blue will hide") 848 }) 849 850 TabContent() { 851 Column().width('100%').height('100%').backgroundColor(Color.Green) 852 }.tabBar(new SubTabBarStyle('Green')) 853 .onWillShow(() => { 854 console.info("Green will show") 855 }) 856 .onWillHide(() => { 857 console.info("Green will hide") 858 }) 859 } 860 .vertical(false) 861 .scrollable(true) 862 .barMode(BarMode.Fixed) 863 .onChange((index: number) => { 864 console.info(index.toString()) 865 }) 866 .width('100%') 867 .backgroundColor(0xF1F3F5) 868 }.width('100%').height(200) 869 Text("底部页签样式") 870 Column() { 871 Tabs({ barPosition: BarPosition.End }) { 872 TabContent() { 873 Column().width('100%').height('100%').backgroundColor(Color.Pink) 874 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 875 .onWillShow(() => { 876 console.info("Pink will show") 877 }) 878 .onWillHide(() => { 879 console.info("Pink will hide") 880 }) 881 882 TabContent() { 883 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 884 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 885 .onWillShow(() => { 886 console.info("Yellow will show") 887 }) 888 .onWillHide(() => { 889 console.info("Yellow will hide") 890 }) 891 892 TabContent() { 893 Column().width('100%').height('100%').backgroundColor(Color.Blue) 894 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 895 .onWillShow(() => { 896 console.info("Blue will show") 897 }) 898 .onWillHide(() => { 899 console.info("Blue will hide") 900 }) 901 902 TabContent() { 903 Column().width('100%').height('100%').backgroundColor(Color.Green) 904 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 905 .onWillShow(() => { 906 console.info("Green will show") 907 }) 908 .onWillHide(() => { 909 console.info("Green will hide") 910 }) 911 } 912 .vertical(false) 913 .scrollable(true) 914 .barMode(BarMode.Fixed) 915 .onChange((index: number) => { 916 console.info(index.toString()) 917 }) 918 .width('100%') 919 .backgroundColor(0xF1F3F5) 920 }.width('100%').height(200) 921 Text("侧边页签样式") 922 Column() { 923 Tabs({ barPosition: BarPosition.Start }) { 924 TabContent() { 925 Column().width('100%').height('100%').backgroundColor(Color.Pink) 926 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink')) 927 .onWillShow(() => { 928 console.info("Pink will show") 929 }) 930 .onWillHide(() => { 931 console.info("Pink will hide") 932 }) 933 934 TabContent() { 935 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 936 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow')) 937 .onWillShow(() => { 938 console.info("Yellow will show") 939 }) 940 .onWillHide(() => { 941 console.info("Yellow will hide") 942 }) 943 944 TabContent() { 945 Column().width('100%').height('100%').backgroundColor(Color.Blue) 946 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue')) 947 .onWillShow(() => { 948 console.info("Blue will show") 949 }) 950 .onWillHide(() => { 951 console.info("Blue will hide") 952 }) 953 954 TabContent() { 955 Column().width('100%').height('100%').backgroundColor(Color.Green) 956 }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green')) 957 .onWillShow(() => { 958 console.info("Green will show") 959 }) 960 .onWillHide(() => { 961 console.info("Green will hide") 962 }) 963 } 964 .vertical(true).scrollable(true).barMode(BarMode.Fixed) 965 .onChange((index: number) => { 966 console.info(index.toString()) 967 }) 968 .width('100%') 969 .backgroundColor(0xF1F3F5) 970 }.width('100%').height(400) 971 } 972 } 973} 974``` 975 976 977 978### 示例4 979 980```ts 981// xxx.ets 982@Entry 983@Component 984struct TabsAttr { 985 private controller: TabsController = new TabsController() 986 @State indicatorColor: Color = Color.Blue; 987 @State indicatorWidth: number = 40; 988 @State indicatorHeight: number = 10; 989 @State indicatorBorderRadius: number = 5; 990 @State indicatorSpace: number = 10; 991 @State subTabBorderRadius: number = 20; 992 @State selectedMode: SelectedMode = SelectedMode.INDICATOR; 993 private colorFlag: boolean = true; 994 private widthFlag: boolean = true; 995 private heightFlag: boolean = true; 996 private borderFlag: boolean = true; 997 private spaceFlag: boolean = true; 998 999 build() { 1000 Column() { 1001 Button("下划线颜色变化").width('100%').margin({ bottom: '12vp' }) 1002 .onClick((event?: ClickEvent) => { 1003 // 对Button组件的宽高属性进行动画配置 1004 if (this.colorFlag) { 1005 animateTo({ 1006 duration: 1000, // 动画时长 1007 curve: Curve.Linear, // 动画曲线 1008 delay: 200, // 动画延迟 1009 iterations: 1, // 播放次数 1010 playMode: PlayMode.Normal, // 动画模式 1011 onFinish: () => { 1012 console.info('play end') 1013 } 1014 }, () => { 1015 this.indicatorColor = Color.Red 1016 }) 1017 } else { 1018 animateTo({ 1019 duration: 1000, // 动画时长 1020 curve: Curve.Linear, // 动画曲线 1021 delay: 200, // 动画延迟 1022 iterations: 1, // 播放次数 1023 playMode: PlayMode.Normal, // 动画模式 1024 onFinish: () => { 1025 console.info('play end') 1026 } 1027 }, () => { 1028 this.indicatorColor = Color.Yellow 1029 }) 1030 } 1031 this.colorFlag = !this.colorFlag 1032 }) 1033 Button("下划线高度变化").width('100%').margin({ bottom: '12vp' }) 1034 .onClick((event?: ClickEvent) => { 1035 // 对Button组件的宽高属性进行动画配置 1036 if (this.heightFlag) { 1037 animateTo({ 1038 duration: 1000, // 动画时长 1039 curve: Curve.Linear, // 动画曲线 1040 delay: 200, // 动画延迟 1041 iterations: 1, // 播放次数 1042 playMode: PlayMode.Normal, // 动画模式 1043 onFinish: () => { 1044 console.info('play end') 1045 } 1046 }, () => { 1047 this.indicatorHeight = 20 1048 }) 1049 } else { 1050 animateTo({ 1051 duration: 1000, // 动画时长 1052 curve: Curve.Linear, // 动画曲线 1053 delay: 200, // 动画延迟 1054 iterations: 1, // 播放次数 1055 playMode: PlayMode.Normal, // 动画模式 1056 onFinish: () => { 1057 console.info('play end') 1058 } 1059 }, () => { 1060 this.indicatorHeight = 10 1061 }) 1062 } 1063 this.heightFlag = !this.heightFlag 1064 }) 1065 Button("下划线宽度变化").width('100%').margin({ bottom: '12vp' }) 1066 .onClick((event?: ClickEvent) => { 1067 // 对Button组件的宽高属性进行动画配置 1068 if (this.widthFlag) { 1069 animateTo({ 1070 duration: 1000, // 动画时长 1071 curve: Curve.Linear, // 动画曲线 1072 delay: 200, // 动画延迟 1073 iterations: 1, // 播放次数 1074 playMode: PlayMode.Normal, // 动画模式 1075 onFinish: () => { 1076 console.info('play end') 1077 } 1078 }, () => { 1079 this.indicatorWidth = 30 1080 }) 1081 } else { 1082 animateTo({ 1083 duration: 1000, // 动画时长 1084 curve: Curve.Linear, // 动画曲线 1085 delay: 200, // 动画延迟 1086 iterations: 1, // 播放次数 1087 playMode: PlayMode.Normal, // 动画模式 1088 onFinish: () => { 1089 console.info('play end') 1090 } 1091 }, () => { 1092 this.indicatorWidth = 50 1093 }) 1094 } 1095 this.widthFlag = !this.widthFlag 1096 }) 1097 Button("下划线圆角半径变化").width('100%').margin({ bottom: '12vp' }) 1098 .onClick((event?: ClickEvent) => { 1099 // 对Button组件的宽高属性进行动画配置 1100 if (this.borderFlag) { 1101 animateTo({ 1102 duration: 1000, // 动画时长 1103 curve: Curve.Linear, // 动画曲线 1104 delay: 200, // 动画延迟 1105 iterations: 1, // 播放次数 1106 playMode: PlayMode.Normal, // 动画模式 1107 onFinish: () => { 1108 console.info('play end') 1109 } 1110 }, () => { 1111 this.indicatorBorderRadius = 0 1112 }) 1113 } else { 1114 animateTo({ 1115 duration: 1000, // 动画时长 1116 curve: Curve.Linear, // 动画曲线 1117 delay: 200, // 动画延迟 1118 iterations: 1, // 播放次数 1119 playMode: PlayMode.Normal, // 动画模式 1120 onFinish: () => { 1121 console.info('play end') 1122 } 1123 }, () => { 1124 this.indicatorBorderRadius = 5 1125 }) 1126 } 1127 this.borderFlag = !this.borderFlag 1128 }) 1129 Button("下划线间距变化").width('100%').margin({ bottom: '12vp' }) 1130 .onClick((event?: ClickEvent) => { 1131 // 对Button组件的宽高属性进行动画配置 1132 if (this.spaceFlag) { 1133 animateTo({ 1134 duration: 1000, // 动画时长 1135 curve: Curve.Linear, // 动画曲线 1136 delay: 200, // 动画延迟 1137 iterations: 1, // 播放次数 1138 playMode: PlayMode.Normal, // 动画模式 1139 onFinish: () => { 1140 console.info('play end') 1141 } 1142 }, () => { 1143 this.indicatorSpace = 20 1144 }) 1145 } else { 1146 animateTo({ 1147 duration: 1000, // 动画时长 1148 curve: Curve.Linear, // 动画曲线 1149 delay: 200, // 动画延迟 1150 iterations: 1, // 播放次数 1151 playMode: PlayMode.Normal, // 动画模式 1152 onFinish: () => { 1153 console.info('play end') 1154 } 1155 }, () => { 1156 this.indicatorSpace = 10 1157 }) 1158 } 1159 this.spaceFlag = !this.spaceFlag 1160 }) 1161 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 1162 TabContent() { 1163 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1164 }.tabBar(SubTabBarStyle.of('pink') 1165 .indicator({ 1166 color: this.indicatorColor, //下划线颜色 1167 height: this.indicatorHeight, //下划线高度 1168 width: this.indicatorWidth, //下划线宽度 1169 borderRadius: this.indicatorBorderRadius, //下划线圆角半径 1170 marginTop: this.indicatorSpace //下划线与文字间距 1171 }) 1172 .selectedMode(this.selectedMode) 1173 .board({ borderRadius: this.subTabBorderRadius }) 1174 .labelStyle({}) 1175 ) 1176 1177 TabContent() { 1178 Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp') 1179 }.tabBar('yellow') 1180 1181 TabContent() { 1182 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1183 }.tabBar('blue') 1184 1185 TabContent() { 1186 Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp') 1187 }.tabBar('green') 1188 1189 TabContent() { 1190 Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp') 1191 }.tabBar('gray') 1192 1193 TabContent() { 1194 Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp') 1195 }.tabBar('orange') 1196 } 1197 .vertical(false) 1198 .scrollable(true) 1199 .barMode(BarMode.Scrollable) 1200 .barHeight(140) 1201 .animationDuration(400) 1202 .onChange((index: number) => { 1203 console.info(index.toString()) 1204 }) 1205 .backgroundColor(0xF5F5F5) 1206 .height(320) 1207 }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' }) 1208 } 1209} 1210``` 1211 1212 1213 1214### 示例5 1215 1216```ts 1217// xxx.ets 1218@Entry 1219@Component 1220struct TabsTextOverflow { 1221 @State message: string = 'Hello World' 1222 private controller: TabsController = new TabsController() 1223 @State subTabOverflowOpaque: boolean = true; 1224 1225 build() { 1226 Column() { 1227 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1228 TabContent() { 1229 Column() { 1230 Text('单行省略号截断').fontSize(30).fontColor(0xFF000000) 1231 }.width('100%').height('100%').backgroundColor(Color.Pink) 1232 } 1233 .tabBar(SubTabBarStyle.of('开始【单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断单行省略号截断】结束') 1234 .labelStyle({ 1235 overflow: TextOverflow.Ellipsis, 1236 maxLines: 1, 1237 minFontSize: 10, 1238 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 1239 font: { size: 20 } 1240 })) 1241 1242 TabContent() { 1243 Column() { 1244 Text('先缩小再截断').fontSize(30).fontColor(0xFF000000) 1245 }.width('100%').height('100%').backgroundColor(Color.Pink) 1246 } 1247 .tabBar(SubTabBarStyle.of('开始【先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断先缩小再截断】结束') 1248 .labelStyle({ 1249 overflow: TextOverflow.Clip, 1250 maxLines: 1, 1251 minFontSize: 15, 1252 maxFontSize: 15, 1253 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 1254 font: { size: 20 } 1255 })) 1256 1257 TabContent() { 1258 Column() { 1259 Text('先缩小再换行再截断').fontSize(30).fontColor(0xFF000000) 1260 }.width('100%').height('100%').backgroundColor(Color.Pink) 1261 } 1262 .tabBar(SubTabBarStyle.of('开始【先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断先缩小再换行再截断】结束') 1263 .labelStyle({ 1264 overflow: TextOverflow.Clip, 1265 maxLines: 2, 1266 minFontSize: 15, 1267 maxFontSize: 15, 1268 heightAdaptivePolicy: TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST, 1269 font: { size: 20 } 1270 })) 1271 1272 TabContent() { 1273 Column() { 1274 Text('换行').fontSize(30).fontColor(0xFF000000) 1275 } 1276 .width('100%').height('100%').backgroundColor(Color.Pink) 1277 }.tabBar(SubTabBarStyle.of('开始【换行换行换行换行换行换行换行换行换行换行换行换行换行换行换行】结束') 1278 .labelStyle({ 1279 overflow: TextOverflow.Clip, 1280 maxLines: 10, 1281 minFontSize: 10, 1282 heightAdaptivePolicy: TextHeightAdaptivePolicy.MAX_LINES_FIRST, 1283 font: { size: 20 } 1284 })) 1285 } 1286 .vertical(true).scrollable(true) 1287 .barMode(BarMode.Fixed) 1288 .barHeight(720) 1289 .barWidth(200).animationDuration(400) 1290 .onChange((index: number) => { 1291 console.info(index.toString()) 1292 }) 1293 .height('100%').width('100%') 1294 } 1295 .height('100%') 1296 } 1297} 1298``` 1299 1300 1301 1302### 示例6 1303 1304```ts 1305// xxx.ets 1306@Entry 1307@Component 1308struct TabContentExample6 { 1309 private controller: TabsController = new TabsController() 1310 @State text: string = "2" 1311 @State tabPadding: number = 0; 1312 @State symmetricExtensible: boolean = false; 1313 @State layoutMode: LayoutMode = LayoutMode.VERTICAL; 1314 @State verticalAlign: VerticalAlign = VerticalAlign.Center; 1315 1316 build() { 1317 Column() { 1318 Row() { 1319 Button("padding+10 " + this.tabPadding) 1320 .width('47%') 1321 .height(50) 1322 .margin({ top: 5 }) 1323 .onClick((event?: ClickEvent) => { 1324 this.tabPadding += 10 1325 }) 1326 .margin({ right: '6%', bottom: '12vp' }) 1327 Button("padding-10 " + this.tabPadding) 1328 .width('47%') 1329 .height(50) 1330 .margin({ top: 5 }) 1331 .onClick((event?: ClickEvent) => { 1332 this.tabPadding -= 10 1333 }) 1334 .margin({ bottom: '12vp' }) 1335 } 1336 1337 Row() { 1338 Button("文本增加 ") 1339 .width('47%') 1340 .height(50) 1341 .margin({ top: 5 }) 1342 .onClick((event?: ClickEvent) => { 1343 this.text += '文本增加' 1344 }) 1345 .margin({ right: '6%', bottom: '12vp' }) 1346 Button("文本重置") 1347 .width('47%') 1348 .height(50) 1349 .margin({ top: 5 }) 1350 .onClick((event?: ClickEvent) => { 1351 this.text = "2" 1352 }) 1353 .margin({ bottom: '12vp' }) 1354 } 1355 1356 Row() { 1357 Button("symmetricExtensible改变 " + this.symmetricExtensible) 1358 .width('100%') 1359 .height(50) 1360 .margin({ top: 5 }) 1361 .onClick((event?: ClickEvent) => { 1362 this.symmetricExtensible = !this.symmetricExtensible 1363 }) 1364 .margin({ bottom: '12vp' }) 1365 } 1366 1367 Row() { 1368 Button("layoutMode垂直 ") 1369 .width('47%') 1370 .height(50) 1371 .margin({ top: 5 }) 1372 .onClick((event?: ClickEvent) => { 1373 this.layoutMode = LayoutMode.VERTICAL; 1374 }) 1375 .margin({ right: '6%', bottom: '12vp' }) 1376 Button("layoutMode水平 ") 1377 .width('47%') 1378 .height(50) 1379 .margin({ top: 5 }) 1380 .onClick((event?: ClickEvent) => { 1381 this.layoutMode = LayoutMode.HORIZONTAL; 1382 }) 1383 .margin({ bottom: '12vp' }) 1384 } 1385 1386 Row() { 1387 Button("verticalAlign朝上") 1388 .width('100%') 1389 .height(50) 1390 .margin({ top: 5 }) 1391 .onClick((event?: ClickEvent) => { 1392 this.verticalAlign = VerticalAlign.Top; 1393 }) 1394 .margin({ bottom: '12vp' }) 1395 } 1396 1397 Row() { 1398 Button("verticalAlign居中") 1399 .width('100%') 1400 .height(50) 1401 .margin({ top: 5 }) 1402 .onClick((event?: ClickEvent) => { 1403 this.verticalAlign = VerticalAlign.Center; 1404 }) 1405 .margin({ bottom: '12vp' }) 1406 } 1407 1408 Row() { 1409 Button("verticalAlign朝下") 1410 .width('100%') 1411 .height(50) 1412 .margin({ top: 5 }) 1413 .onClick((event?: ClickEvent) => { 1414 this.verticalAlign = VerticalAlign.Bottom; 1415 }) 1416 .margin({ bottom: '12vp' }) 1417 } 1418 1419 1420 Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 1421 TabContent() { 1422 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1423 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1")) 1424 1425 TabContent() { 1426 Column().width('100%').height('100%').backgroundColor(Color.Green) 1427 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text) 1428 .padding(this.tabPadding) 1429 .verticalAlign(this.verticalAlign) 1430 .layoutMode(this.layoutMode) 1431 .symmetricExtensible(this.symmetricExtensible)) 1432 1433 TabContent() { 1434 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1435 }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3")) 1436 } 1437 .animationDuration(300) 1438 .height('60%') 1439 .backgroundColor(0xf1f3f5) 1440 .barMode(BarMode.Fixed) 1441 } 1442 .width('100%') 1443 .height(500) 1444 .margin({ top: 5 }) 1445 .padding('24vp') 1446 } 1447} 1448``` 1449 1450 1451 1452### 示例7 1453 1454本示例通过labelStyle中的unselectedColor和selectedColor改变底部页签以及子页签的文本颜色。 1455通过iconStyle中的unselectedColor和selectedColor改变底部页签的图标颜色。 1456 1457```ts 1458// xxx.ets 1459@Entry 1460@Component 1461struct TabBarStyleExample { 1462 build() { 1463 Column({ space: 5 }) { 1464 Text("子页签样式") 1465 Column() { 1466 Tabs({ barPosition: BarPosition.Start }) { 1467 TabContent() { 1468 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1469 }.tabBar(new SubTabBarStyle('Pink') 1470 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1471 1472 TabContent() { 1473 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1474 }.tabBar(new SubTabBarStyle('Yellow') 1475 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1476 1477 TabContent() { 1478 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1479 }.tabBar(new SubTabBarStyle('Blue') 1480 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green })) 1481 1482 TabContent() { 1483 Column().width('100%').height('100%').backgroundColor(Color.Green) 1484 }.tabBar(new SubTabBarStyle('Green') 1485 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1486 ) 1487 } 1488 .vertical(false) 1489 .scrollable(true) 1490 .barMode(BarMode.Fixed) 1491 .onChange((index: number) => { 1492 console.info(index.toString()) 1493 }) 1494 .width('100%') 1495 .backgroundColor(0xF1F3F5) 1496 }.width('100%').height(200) 1497 1498 Text("底部页签样式") 1499 Column() { 1500 Tabs({ barPosition: BarPosition.End }) { 1501 TabContent() { 1502 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1503 } 1504 .tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'pink') 1505 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1506 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1507 ) 1508 1509 TabContent() { 1510 Column().width('100%').height('100%').backgroundColor(Color.Yellow) 1511 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Yellow') 1512 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1513 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1514 ) 1515 1516 TabContent() { 1517 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1518 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Blue') 1519 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1520 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1521 ) 1522 1523 TabContent() { 1524 Column().width('100%').height('100%').backgroundColor(Color.Green) 1525 }.tabBar(new BottomTabBarStyle('/common/public_icon_off.svg', 'Green') 1526 .labelStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1527 .iconStyle({ unselectedColor: Color.Red, selectedColor: Color.Green }) 1528 ) 1529 } 1530 .vertical(false) 1531 .scrollable(true) 1532 .barMode(BarMode.Fixed) 1533 .onChange((index: number) => { 1534 console.info(index.toString()) 1535 }) 1536 .width('100%') 1537 .backgroundColor(0xF1F3F5) 1538 }.width('100%').height(200) 1539 } 1540 } 1541} 1542``` 1543 1544 1545 1546### 示例8 1547该示例实现了通过ComponentContent设置SubTabBarStyle。 1548```ts 1549// xxx.ets 1550import { ComponentContent, UIContext } from "@kit.ArkUI" 1551 1552class Params { 1553 text: string = "" 1554 1555 constructor(text: string) { 1556 this.text = text; 1557 } 1558} 1559 1560@Builder 1561function buildText(params: Params) { 1562 Column() { 1563 Text(params.text) 1564 .fontSize(20) 1565 .fontWeight(FontWeight.Bold) 1566 .margin(20) 1567 } 1568} 1569 1570@Entry 1571@Component 1572struct Index { 1573 @State message1: string = "tabBar1" 1574 @State message2: string = "tabBar2" 1575 context: UIContext = this.getUIContext() 1576 private count1 = 0; 1577 private count2 = 0; 1578 private controller: TabsController = new TabsController(); 1579 tabBar1: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message1)); 1580 tabBar2: ComponentContent<Params> = new ComponentContent<Params>(this.context, wrapBuilder<[Params]>(buildText), new Params(this.message2)); 1581 1582 build() { 1583 Row() { 1584 Column() { 1585 Button("更新tabBar1").width('90%').margin(20) 1586 .onClick((event?: ClickEvent) => { 1587 this.count1 += 1; 1588 const message1 = "Update 1_" + this.count1.toString(); 1589 this.tabBar1.update(new Params(message1)); 1590 }) 1591 Button("更新tabBar2").width('90%').margin(20) 1592 .onClick((event?: ClickEvent) => { 1593 this.count2 += 1; 1594 const message2 = "Update 2_" + this.count2.toString(); 1595 this.tabBar2.update(new Params(message2)); 1596 }) 1597 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 1598 TabContent() { 1599 Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp') 1600 }.tabBar(new SubTabBarStyle(this.tabBar1)) 1601 TabContent() { 1602 Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp') 1603 }.tabBar(SubTabBarStyle.of(this.tabBar2)) 1604 } 1605 .vertical(false) 1606 .barWidth(414) 1607 .barHeight(96) 1608 .width(414) 1609 .height(414) 1610 .backgroundColor('#F1F3F5') 1611 .margin({ top: 20 }) 1612 } 1613 .width('100%') 1614 .height('100%') 1615 } 1616 .height('100%') 1617 } 1618} 1619``` 1620 1621 1622 1623### 示例9 1624该示例实现了BottomTabBarStyle图片传入Symbol。 1625```ts 1626// xxx.ets 1627import { SymbolGlyphModifier } from '@kit.ArkUI' 1628 1629@Entry 1630@Component 1631struct Index { 1632 @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')); 1633 @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ellipsis_bubble')); 1634 @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.dot_video')); 1635 @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')); 1636 build() { 1637 Column({space: 5}) { 1638 Text("底部页签样式") 1639 Column(){ 1640 Tabs({barPosition: BarPosition.End}) { 1641 TabContent() { 1642 Column().width('100%').height('100%').backgroundColor(Color.Pink) 1643 }.tabBar(new BottomTabBarStyle({ 1644 normal: this.symbolModifier1, 1645 }, 'Pink')) 1646 .onWillShow(() => { 1647 console.info("Pink will show") 1648 }) 1649 .onWillHide(() => { 1650 console.info("Pink will hide") 1651 }) 1652 1653 TabContent() { 1654 Column().width('100%').height('100%').backgroundColor(Color.Orange) 1655 }.tabBar(new BottomTabBarStyle({ 1656 normal: this.symbolModifier2, 1657 }, 'Orange')) 1658 .onWillShow(() => { 1659 console.info("Orange will show") 1660 }) 1661 .onWillHide(() => { 1662 console.info("Orange will hide") 1663 }) 1664 1665 TabContent() { 1666 Column().width('100%').height('100%').backgroundColor(Color.Blue) 1667 }.tabBar(new BottomTabBarStyle({ 1668 normal: this.symbolModifier3, 1669 }, 'Blue')) 1670 .onWillShow(() => { 1671 console.info("Blue will show") 1672 }) 1673 .onWillHide(() => { 1674 console.info("Blue will hide") 1675 }) 1676 1677 TabContent() { 1678 Column().width('100%').height('100%').backgroundColor(Color.Green) 1679 }.tabBar(new BottomTabBarStyle({ 1680 normal: this.symbolModifier4, 1681 }, 'Green')) 1682 .onWillShow(() => { 1683 console.info("Green will show") 1684 }) 1685 .onWillHide(() => { 1686 console.info("Green will hide") 1687 }) 1688 } 1689 .vertical(false) 1690 .scrollable(true) 1691 .barMode(BarMode.Fixed) 1692 .onChange((index:number)=>{ 1693 console.info(index.toString()) 1694 }) 1695 .width('100%') 1696 .backgroundColor(0xF1F3F5) 1697 }.width('100%').height(200) 1698 } 1699 } 1700} 1701``` 1702 1703
