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