子组件

仅支持子组件TabContent，以及渲染控制类型if/else和ForEach，不建议自定义组件作为子组件。并且if/else和ForEach下也仅支持TabContent作为子组件，不建议自定义组件作为子组件。

Tabs子组件设置了通用属性visibility的值为None，或者设置值为Hidden时，对应子组件不显示，但依然会在视窗内占位。

已经显示的Tabs子组件TabContent后续隐藏时不会被销毁，若需要页面懒加载和释放，可以参考示例13。

Tabs设置height为auto时，可根据子组件高度自适应高度大小。设置width为auto时，可根据子组件宽度自适应宽度大小。

接口

Tabs(options?: TabsOptions)

创建Tabs容器。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
options	TabsOptions	否	Tabs组件参数。

TabsOptions¹⁵⁺

Tabs组件参数，设置Tabs的页签位置，当前显示页签的索引，Tabs控制器和TabBar的通用属性。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
barPosition⁷⁺	BarPosition	否	是	设置Tabs的页签位置。默认值：BarPosition.Start。元服务API：从API version 11开始，该接口支持在元服务中使用。
index⁷⁺	number	否	是	设置当前显示页签的索引。默认值：0 说明：设置为小于0的值时按默认值显示。可选值为[0, TabContent子节点数量-1]。直接修改index跳页时，切换动效不生效。使用TabsController的changeIndex时，默认生效切换动效，可以设置animationDuration为0关闭动画。从API version 10开始，该参数支持$$双向绑定变量。 Tabs重建、系统资源切换（如系统字体切换、系统深浅色切换）或者组件属性变化时，会跳转到index对应的页面。若需要在上述情况下不跳转，建议使用双向绑定。元服务API：从API version 11开始，该接口支持在元服务中使用。
controller⁷⁺	TabsController	否	是	设置Tabs控制器。元服务API：从API version 11开始，该接口支持在元服务中使用。
barModifier	CommonModifier	否	是	设置TabBar的通用属性。说明：动态置为undefined时会保持当前状态不变，不会重置各通用属性。由一个CommonModifier切换为另一个CommonModifier时，重复属性会进行覆盖，非重复属性会同时生效，不会重置前一个CommonModifier的通用属性。 Tabs的barWidth、barHeight、barBackgroundColor、barBackgroundBlurStyle、barBackgroundEffect属性会覆盖CommonModifier的width、height、backgroundColor、backgroundBlurStyle、backgroundEffect属性。从API版本26.0.1开始，Tabs的sidebarWidth、sidebarBackgroundColor、sidebarBackgroundBlurStyle属性会覆盖CommonModifier的width、backgroundColor、backgroundBlurStyle属性。 align属性仅在BarMode.Scrollable模式下生效，且Tabs为横向时还需nonScrollableLayoutStyle未设置或设置为异常值时才能生效。 TabContent组件的tabBar属性为底部页签样式时不支持拖拽功能。元服务API：从API version 15开始，该接口支持在元服务中使用。

BarPosition枚举说明

Tabs页签位置枚举。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
Start	0	vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。
End	1	vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

TabBarStyle

TabBar显示样式枚举。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
BOTTOM	0	底部页签栏样式。页签栏位置可通过Tabs的vertical、barPosition属性调整。
SIDEBAR	1	侧边页签栏样式。页签栏显示为侧边栏。
SIDEBAR_ADAPTABLE	2	自适应侧边页签栏样式。页签栏可根据Tabs容器大小在底部页签栏样式和侧边栏样式之间切换。

属性

除支持通用属性外，还支持以下属性：

[h2]vertical

vertical(value: boolean)

设置是否为纵向Tabs。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	boolean	是	是否为纵向Tabs。默认值：false，横向Tabs，为true时纵向Tabs。当横向Tabs设置height为auto时，Tabs组件高度自适应子组件高度，即为tabBar高度+divider线宽+TabContent高度+上下padding值+上下border宽度。当纵向Tabs设置width为auto时，Tabs组件宽度自适应子组件宽度，即为tabBar宽度+divider线宽+TabContent宽度+左右padding值+左右border宽度。尽量保持每一个页面中的子组件尺寸大小一致，避免滑动页面时出现页面切换动画跳动现象。

参数名

类型

必填

说明

value

boolean

是

是否为纵向Tabs。

默认值：false，横向Tabs，为true时纵向Tabs。

当横向Tabs设置height为auto时，Tabs组件高度自适应子组件高度，即为tabBar高度+divider线宽+TabContent高度+上下padding值+上下border宽度。

当纵向Tabs设置width为auto时，Tabs组件宽度自适应子组件宽度，即为tabBar宽度+divider线宽+TabContent宽度+左右padding值+左右border宽度。

尽量保持每一个页面中的子组件尺寸大小一致，避免滑动页面时出现页面切换动画跳动现象。

[h2]scrollable

scrollable(value: boolean)

设置是否可以通过滑动页面进行页面切换。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	boolean	是	是否可以通过滑动页面进行页面切换。默认值：true，可以通过滑动页面进行页面切换。为false时不可滑动切换页面。

参数名

类型

必填

说明

value

boolean

是

是否可以通过滑动页面进行页面切换。

默认值：true，可以通过滑动页面进行页面切换。为false时不可滑动切换页面。

[h2]barMode

barMode(value: BarMode, options?: ScrollableBarModeOptions)

设置TabBar布局模式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	BarMode	是	布局模式。默认值：BarMode.Fixed
options¹⁰⁺	ScrollableBarModeOptions	否	Scrollable模式下的TabBar的布局样式。说明：仅Scrollable且水平模式下有效。模型约束：此接口仅可在Stage模型下使用。

参数名

类型

必填

说明

value

BarMode

是

布局模式。

默认值：BarMode.Fixed

options¹⁰⁺

ScrollableBarModeOptions

否

Scrollable模式下的TabBar的布局样式。

说明：

仅Scrollable且水平模式下有效。

模型约束： 此接口仅可在Stage模型下使用。

[h2]barMode¹⁰⁺

barMode(value: BarMode.Fixed)

设置TabBar布局模式为BarMode.Fixed。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	BarMode.Fixed	是	所有TabBar会平均分配barWidth宽度（纵向时平均分配barHeight高度）。

[h2]barMode¹⁰⁺

barMode(value: BarMode.Scrollable, options: ScrollableBarModeOptions)

设置TabBar布局模式为BarMode.Scrollable。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	BarMode.Scrollable	是	所有TabBar都使用实际布局宽度，超过总宽度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。
options	ScrollableBarModeOptions	是	Scrollable模式下的TabBar的布局样式。说明：仅水平模式下有效。

参数名

类型

必填

说明

value

BarMode.Scrollable

是

所有TabBar都使用实际布局宽度，超过总宽度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。

options

ScrollableBarModeOptions

是

Scrollable模式下的TabBar的布局样式。

说明：

仅水平模式下有效。

[h2]barWidth

barWidth(value: Length)

设置TabBar的宽度值。设置为小于0或大于Tabs宽度值时，按默认值显示。该接口也可以设置Tabs侧边页签栏的宽度，具体情况请参考sidebarWidth接口的说明。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Length⁸⁺	是	TabBar的宽度值。默认值：未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为false时，默认值为Tabs的宽度。未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为true时，默认值为56vp。设置SubTabBarStyle样式且vertical属性为false时，默认值为Tabs的宽度。设置SubTabBarStyle样式且vertical属性为true时，默认值为56vp。设置BottomTabBarStyle样式且vertical属性为true时，默认值为96vp。设置BottomTabBarStyle样式且vertical属性为false时，默认值为Tabs的宽度。

参数名

类型

必填

说明

value

Length⁸⁺

是

TabBar的宽度值。

默认值：

未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为false时，默认值为Tabs的宽度。

未设置SubTabBarStyle和BottomTabBarStyle的TabBar且vertical属性为true时，默认值为56vp。

设置SubTabBarStyle样式且vertical属性为false时，默认值为Tabs的宽度。

设置SubTabBarStyle样式且vertical属性为true时，默认值为56vp。

设置BottomTabBarStyle样式且vertical属性为true时，默认值为96vp。

设置BottomTabBarStyle样式且vertical属性为false时，默认值为Tabs的宽度。

[h2]barHeight

barHeight(value: Length)

设置TabBar的高度值。横向Tabs可以设置height为'auto'，让TabBar自适应子组件高度。height设置为小于0或大于Tabs高度值时，按默认值显示。

API version 14之前的版本，若设置barHeight为固定值后，TabBar无法扩展底部安全区。从API version 14开始支持配合safeAreaPadding属性，当safeAreaPadding不设置bottom或者bottom设置为0时，可以实现扩展安全区。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Length⁸⁺	是	TabBar的高度值。默认值：未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为false时，默认值为56vp。未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为true时，默认值为Tabs的高度。设置SubTabBarStyle样式且vertical属性为false时，默认值为56vp。设置SubTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabBarStyle样式且vertical属性为false时，默认值为56vp，从API version 12开始，默认值变更为48vp。

参数名

类型

必填

说明

value

Length⁸⁺

是

TabBar的高度值。

默认值：

未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为false时，默认值为56vp。

未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为true时，默认值为Tabs的高度。

设置SubTabBarStyle样式且vertical属性为false时，默认值为56vp。

设置SubTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。

设置BottomTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。

设置BottomTabBarStyle样式且vertical属性为false时，默认值为56vp，从API version 12开始，默认值变更为48vp。

[h2]barHeight²⁰⁺

barHeight(height: Length, noMinHeightLimit: boolean)

设置TabBar的高度值。横向Tabs可以设置height为'auto'，让TabBar自适应子组件高度，并通过设置noMinHeightLimit为true让自适应高度可以小于TabBar默认高度。height设置为小于0或大于Tabs高度值时，按默认值显示。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
height	Length	是	TabBar的高度值。默认值：未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为false时，默认值为56vp。未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为true时，默认值为Tabs的高度。设置SubTabBarStyle样式且vertical属性为false时，默认值为56vp。设置SubTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。设置BottomTabBarStyle样式且vertical属性为false时，默认值为48vp。
noMinHeightLimit	boolean	是	height设置为'auto'时，设置是否取消TabBar的最小高度限制。默认值为false。说明：值为true表示取消TabBar的最小高度限制，即TabBar的高度值可以小于默认值。值为false表示限制TabBar的最小高度，即TabBar的最小高度值等于默认值。

参数名

类型

必填

说明

height

Length

是

TabBar的高度值。

默认值：

未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为false时，默认值为56vp。

未设置样式或者通过CustomBuilder设置自定义样式的TabBar且vertical属性为true时，默认值为Tabs的高度。

设置SubTabBarStyle样式且vertical属性为false时，默认值为56vp。

设置SubTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。

设置BottomTabBarStyle样式且vertical属性为true时，默认值为Tabs的高度。

设置BottomTabBarStyle样式且vertical属性为false时，默认值为48vp。

noMinHeightLimit

boolean

是

height设置为'auto'时，设置是否取消TabBar的最小高度限制。默认值为false。

说明：

值为true表示取消TabBar的最小高度限制，即TabBar的高度值可以小于默认值。

值为false表示限制TabBar的最小高度，即TabBar的最小高度值等于默认值。

[h2]animationCurve²⁰⁺

animationCurve(curve: Curve | ICurve)

设置Tabs翻页动画曲线。常用曲线参考Curve枚举说明，也可以通过插值计算模块提供的接口创建自定义的插值曲线对象。

元服务API： 从API version 20开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
curve	Curve \| ICurve	是	Tabs翻页的动画曲线。默认值：滑动TabContent翻页时，默认值为interpolatingSpring(-1, 1, 228, 30)。点击TabBar页签和调用TabsController的changeIndex接口翻页时，默认值为cubicBezierCurve(0.2, 0.0, 0.1, 1.0)。设置自定义动画曲线时，滑动翻页和点击页签、调用changeIndex翻页都使用设置的动画曲线。

参数名

类型

必填

说明

curve

Curve | ICurve

是

Tabs翻页的动画曲线。

默认值：

滑动TabContent翻页时，默认值为interpolatingSpring(-1, 1, 228, 30)。

点击TabBar页签和调用TabsController的changeIndex接口翻页时，默认值为cubicBezierCurve(0.2, 0.0, 0.1, 1.0)。

设置自定义动画曲线时，滑动翻页和点击页签、调用changeIndex翻页都使用设置的动画曲线。

[h2]animationDuration

animationDuration(value: number)

设置Tabs翻页动画时长。

animationCurve不设置时，由于滑动TabContent翻页动画曲线interpolatingSpring(-1, 1, 228, 30)时长只受曲线自身参数影响，animationDuration只能控制点击TabBar页签和调用TabsController的changeIndex接口切换TabContent的动画时长。

不受animationDuration控制的曲线可以查阅插值计算模块，比如springMotion、responsiveSpringMotion和interpolatingSpring类型的曲线。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	number	是	Tabs翻页的动画时长。默认值： API version 10及以前，不设置该属性或设置为null时，默认值为0，即Tabs翻页无动画。设置为小于0或undefined时，默认值为300。 API version 11及以后，不设置该属性或设置为异常值，且设置TabBar为BottomTabBarStyle样式时，默认值为0。设置TabBar为其他样式时，默认值为300。单位：ms 取值范围：[0, +∞)

参数名

类型

必填

说明

value

number

是

Tabs翻页的动画时长。

默认值：

API version 10及以前，不设置该属性或设置为null时，默认值为0，即Tabs翻页无动画。设置为小于0或undefined时，默认值为300。

API version 11及以后，不设置该属性或设置为异常值，且设置TabBar为BottomTabBarStyle样式时，默认值为0。设置TabBar为其他样式时，默认值为300。

单位：ms

取值范围：[0, +∞)

[h2]animationMode¹²⁺

animationMode(mode: Optional<AnimationMode>)

设置点击TabBar页签或调用TabsController的changeIndex接口时切换TabContent的动画形式。

此属性不支持在attributeModifier中调用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
mode	Optional<AnimationMode>	是	点击TabBar页签或调用TabsController的changeIndex接口时切换TabContent的动画形式。默认值：AnimationMode.CONTENT_FIRST，表示在点击TabBar页签或调用TabsController的changeIndex接口切换TabContent时，先加载目标页内容，再开始切换动画。

参数名

类型

必填

说明

mode

Optional<AnimationMode>

是

点击TabBar页签或调用TabsController的changeIndex接口时切换TabContent的动画形式。

默认值：AnimationMode.CONTENT_FIRST，表示在点击TabBar页签或调用TabsController的changeIndex接口切换TabContent时，先加载目标页内容，再开始切换动画。

[h2]barPosition⁹⁺

barPosition(value: BarPosition)

设置Tabs的页签位置。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	BarPosition	是	设置Tabs的页签位置。默认值：BarPosition.Start

参数名

类型

必填

说明

value

BarPosition

是

设置Tabs的页签位置。

默认值：BarPosition.Start

[h2]divider¹⁰⁺

divider(value: DividerStyle | null)

设置区分TabBar和TabContent的分割线样式。该接口也可以设置Tabs侧边页签栏的分割线样式，具体情况请参考sidebarDivider接口的说明。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	DividerStyle \| null	是	分割线样式，默认不显示分割线。 DividerStyle：分割线的样式； null：不显示分割线。

参数名

类型

必填

说明

value

DividerStyle | null

是

分割线样式，默认不显示分割线。

DividerStyle：分割线的样式；

null：不显示分割线。

[h2]fadingEdge¹⁰⁺

fadingEdge(value: boolean)

设置页签超过容器宽度时是否渐隐消失。建议配合barBackgroundColor属性一起使用，如果barBackgroundColor属性没有定义，会默认显示页签末端为白色的渐隐效果。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	boolean	是	页签超过容器宽度时是否渐隐消失。默认值：true，页签超过容器宽度时会渐隐消失。设置为false时，页签超过容器宽度直接截断显示，不产生任何渐变效果‌。

参数名

类型

必填

说明

value

boolean

是

页签超过容器宽度时是否渐隐消失。

默认值：true，页签超过容器宽度时会渐隐消失。设置为false时，页签超过容器宽度直接截断显示，不产生任何渐变效果‌。

[h2]barOverlap¹⁰⁺

barOverlap(value: boolean)

设置TabBar是否背后变模糊并叠加在TabContent之上。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	boolean	是	TabBar是否背后变模糊并叠加在TabContent之上。当barOverlap设置为true时，TabBar背后变模糊并叠加在TabContent之上，并且TabBar默认模糊材质的BlurStyle值修改为'BlurStyle.COMPONENT_THICK'。当barOverlap设置为false时，无模糊和叠加效果。默认值：false

参数名

类型

必填

说明

value

boolean

是

TabBar是否背后变模糊并叠加在TabContent之上。当barOverlap设置为true时，TabBar背后变模糊并叠加在TabContent之上，并且TabBar默认模糊材质的BlurStyle值修改为'BlurStyle.COMPONENT_THICK'。当barOverlap设置为false时，无模糊和叠加效果。

默认值：false

[h2]barBackgroundColor¹⁰⁺

barBackgroundColor(value: ResourceColor)

设置TabBar的背景颜色。该接口也可以设置Tabs侧边页签栏的背景颜色，具体情况请参考sidebarBackgroundColor接口的说明。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	ResourceColor	是	TabBar的背景颜色。默认值：Color.Transparent，透明

参数名

类型

必填

说明

value

ResourceColor

是

TabBar的背景颜色。

默认值：Color.Transparent，透明

[h2]barBackgroundBlurStyle¹¹⁺

barBackgroundBlurStyle(value: BlurStyle)

设置TabBar的背景模糊材质。该接口也可以设置Tabs侧边页签栏的背景模糊样式，具体情况请参考sidebarBackgroundBlurStyle接口的说明。

从API version 12开始，该接口支持在attributeModifier中调用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	BlurStyle	是	TabBar的背景模糊材质。默认值：BlurStyle.NONE

参数名

类型

必填

说明

value

BlurStyle

是

TabBar的背景模糊材质。

默认值：BlurStyle.NONE

[h2]barBackgroundBlurStyle¹⁸⁺

barBackgroundBlurStyle(style: BlurStyle, options: BackgroundBlurStyleOptions)

为TabBar提供一种在背景和内容之间的模糊能力，通过枚举值的方式封装了不同的模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度。该接口也可以设置Tabs侧边页签栏的背景模糊样式，具体情况请参考sidebarBackgroundBlurStyle接口的说明。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
style	BlurStyle	是	背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。
options	BackgroundBlurStyleOptions	是	背景模糊选项。

[h2]barGridAlign¹⁰⁺

barGridAlign(value: BarGridColumnOptions)

以栅格化方式设置TabBar的可见区域。具体参见BarGridColumnOptions对象。仅水平模式下有效，不适用于XS、XL和XXL设备。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	BarGridColumnOptions	是	以栅格化方式设置TabBar的可见区域。

[h2]edgeEffect¹²⁺

edgeEffect(edgeEffect: Optional<EdgeEffect>)

设置边缘滑动效果。

从API version 17开始，该接口支持在attributeModifier中调用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
edgeEffect	Optional<EdgeEffect>	是	边缘滑动效果。默认值：EdgeEffect.Spring

参数名

类型

必填

说明

edgeEffect

Optional<EdgeEffect>

是

边缘滑动效果。

默认值：EdgeEffect.Spring

[h2]barBackgroundEffect¹⁸⁺

barBackgroundEffect(options: BackgroundEffectOptions)

设置TabBar背景属性，包含背景模糊半径，亮度，饱和度，颜色等参数。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
options	BackgroundEffectOptions	是	设置TabBar背景属性包括：模糊半径，亮度，饱和度，颜色等。

[h2]pageFlipMode¹⁵⁺

pageFlipMode(mode: Optional<PageFlipMode>)

设置鼠标滚轮翻页模式。

元服务API： 从API version 15开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
mode	Optional<PageFlipMode>	是	鼠标滚轮翻页模式。默认值：PageFlipMode.CONTINUOUS

参数名

类型

必填

说明

mode

Optional<PageFlipMode>

是

鼠标滚轮翻页模式。

默认值：PageFlipMode.CONTINUOUS

[h2]cachedMaxCount¹⁹⁺

cachedMaxCount(count: number, mode: TabsCacheMode)

设置子组件的最大缓存个数及缓存模式。未设置该属性时默认缓存所有子组件且缓存后不会释放。

元服务API： 从API version 19开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
count	number	是	子组件的最大缓存个数。超出范围时自动释放不再需要的子组件。取值范围：[0, +∞)。
mode	TabsCacheMode	是	子组件的缓存模式。默认值：TabsCacheMode.CACHE_BOTH_SIDE

参数名

类型

必填

说明

count

number

是

子组件的最大缓存个数。超出范围时自动释放不再需要的子组件。

取值范围：[0, +∞)。

mode

TabsCacheMode

是

子组件的缓存模式。

默认值：TabsCacheMode.CACHE_BOTH_SIDE

[h2]nestedScroll²⁴⁺

nestedScroll(value: TabsNestedScrollMode | undefined)

设置Tabs组件与其父组件的嵌套滚动模式。未通过该接口设置时，默认嵌套滚动模式为SELF_ONLY。

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API version 24开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	TabsNestedScrollMode \| undefined	是	Tabs组件和父组件的嵌套滚动模式。设置undefined时，Tabs自身滚动，不与父组件联动。

参数名

类型

必填

说明

value

TabsNestedScrollMode | undefined

是

Tabs组件和父组件的嵌套滚动模式。

设置undefined时，Tabs自身滚动，不与父组件联动。

[h2]barFloatingStyle

barFloatingStyle(style: Optional<FloatingTabBarStyle>)

设置TabBar悬浮样式。

悬浮样式可以让TabBar以悬浮的方式显示在Tabs的底部。仅当同时满足属性barOverlap为true，vertical为false，barPosition为BarPosition.End时，该接口设置才有效。

起始版本： 26.0.0

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.0开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
style	Optional<FloatingTabBarStyle>	是	TabBar的悬浮样式配置。设置undefined时，取消悬浮样式，恢复默认样式。

参数名

类型

必填

说明

style

Optional<FloatingTabBarStyle>

是

TabBar的悬浮样式配置。

设置undefined时，取消悬浮样式，恢复默认样式。

[h2]barStyle

barStyle(style: Optional<TabBarStyle>)

设置TabBar的显示样式，未通过该接口设置时，TabBar的显示样式默认为TabBarStyle.BOTTOM。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
style	Optional<TabBarStyle>	是	TabBar的显示样式。设置undefined时，恢复默认显示样式。

参数名

类型

必填

说明

style

Optional<TabBarStyle>

是

TabBar的显示样式。

设置undefined时，恢复默认显示样式。

[h2]sidebarPosition

sidebarPosition(position: Optional<BarPosition>)

设置侧边页签栏的位置，未通过该接口设置时，侧边页签栏的位置默认为BarPosition.Start。

侧边页签栏的位置不受vertical和barPosition属性影响。BarPosition.Start表示侧边页签栏位于Tabs容器的起始侧，当语言方向为LTR时显示在左侧，RTL时显示在右侧；BarPosition.End表示侧边页签栏位于Tabs容器的结束侧，当语言方向为LTR时显示在右侧，RTL时显示在左侧。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
position	Optional<BarPosition>	是	侧边页签栏的显示位置。设置undefined时，恢复默认显示位置。

参数名

类型

必填

说明

position

Optional<BarPosition>

是

侧边页签栏的显示位置。

设置undefined时，恢复默认显示位置。

[h2]sidebarHeader

sidebarHeader(header: Optional<ComponentContent>)

设置侧边页签栏的头部内容，未通过该接口设置时，侧边页签栏不显示自定义头部区域。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
header	Optional<ComponentContent>	是	侧边页签栏的头部内容。设置undefined时，侧边页签栏不显示自定义头部区域。

参数名

类型

必填

说明

header

Optional<ComponentContent>

是

侧边页签栏的头部内容。

设置undefined时，侧边页签栏不显示自定义头部区域。

[h2]sidebarSearchable

sidebarSearchable(searchOptions?: TabsSidebarSearchableOptions)

设置侧边页签栏的搜索选项。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
searchOptions	TabsSidebarSearchableOptions	否	侧边页签栏的搜索选项。不设置时不显示搜索框。

[h2]barDisplayModeBreakpoint

barDisplayModeBreakpoint(style: Optional<TabsBreakpointType<TabBarDisplayMode>>)

设置不同Tabs容器断点下页签栏的显示模式，仅当barStyle属性设置为TabBarStyle.SIDEBAR_ADAPTABLE时生效。未通过该接口设置时，显示模式默认值为：{ sm: TabBarDisplayMode.BOTTOM_TABBAR, md: TabBarDisplayMode.BOTTOM_TABBAR, lg: TabBarDisplayMode.SIDEBAR }。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
style	Optional<TabsBreakpointType<TabBarDisplayMode>>	是	不同Tabs容器断点下页签栏的显示模式。设置undefined时，恢复默认显示模式。

参数名

类型

必填

说明

style

Optional<TabsBreakpointType<TabBarDisplayMode>>

是

不同Tabs容器断点下页签栏的显示模式。

设置undefined时，恢复默认显示模式。

[h2]sidebarSelectedIconColor

sidebarSelectedIconColor(value: Optional<ResourceColor>)

设置Tabs侧边页签栏中页签图标的选中态颜色。

当页签样式为BottomTabBarStyle时，其iconStyle属性中TabBarIconStyle的selectedColor优先级高于sidebarSelectedIconColor。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<ResourceColor>	是	Tabs侧边页签栏中页签图标的选中态颜色，只适用于Symbol、SVG类型图片。设置undefined时，恢复系统默认颜色。

参数名

类型

必填

说明

value

Optional<ResourceColor>

是

Tabs侧边页签栏中页签图标的选中态颜色，只适用于Symbol、SVG类型图片。

设置undefined时，恢复系统默认颜色。

[h2]sidebarSelectedTextColor

sidebarSelectedTextColor(value: Optional<ResourceColor>)

设置Tabs侧边页签栏中页签文本的选中态颜色。

当页签样式为SubTabBarStyle或BottomTabBarStyle时（二者作为tabBar参数互斥使用），其labelStyle属性中LabelStyle的selectedColor优先级高于sidebarSelectedTextColor。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<ResourceColor>	是	Tabs侧边页签栏中页签文本的选中态颜色。设置undefined时，恢复系统默认颜色。

参数名

类型

必填

说明

value

Optional<ResourceColor>

是

Tabs侧边页签栏中页签文本的选中态颜色。

设置undefined时，恢复系统默认颜色。

[h2]sidebarUnselectedIconColor

sidebarUnselectedIconColor(value: Optional<ResourceColor>)

设置Tabs侧边页签栏中页签图标的非选中态颜色。

当页签样式为BottomTabBarStyle时，其iconStyle属性中TabBarIconStyle的unselectedColor优先级高于sidebarUnselectedIconColor。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<ResourceColor>	是	Tabs侧边页签栏中页签图标的非选中态颜色，只适用于Symbol、SVG类型图片。设置undefined时，恢复系统默认颜色。

参数名

类型

必填

说明

value

Optional<ResourceColor>

是

Tabs侧边页签栏中页签图标的非选中态颜色，只适用于Symbol、SVG类型图片。

设置undefined时，恢复系统默认颜色。

[h2]sidebarUnselectedTextColor

sidebarUnselectedTextColor(value: Optional<ResourceColor>)

设置Tabs侧边页签栏中页签文本的非选中态颜色。

当页签样式为SubTabBarStyle或BottomTabBarStyle时（二者作为tabBar参数互斥使用），其labelStyle属性中LabelStyle的unselectedColor优先级高于sidebarUnselectedTextColor。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<ResourceColor>	是	Tabs侧边页签栏中页签文本的非选中态颜色。设置undefined时，恢复系统默认颜色。

参数名

类型

必填

说明

value

Optional<ResourceColor>

是

Tabs侧边页签栏中页签文本的非选中态颜色。

设置undefined时，恢复系统默认颜色。

[h2]sidebarSelectedBoardColor

sidebarSelectedBoardColor(value: Optional<ResourceColor>)

设置Tabs侧边页签栏中页签的背板颜色。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<ResourceColor>	是	Tabs侧边页签栏中页签的背板颜色。设置undefined时，恢复系统默认颜色。

参数名

类型

必填

说明

value

Optional<ResourceColor>

是

Tabs侧边页签栏中页签的背板颜色。

设置undefined时，恢复系统默认颜色。

[h2]sidebarWidth

sidebarWidth(value: Optional<Length>)

设置Tabs侧边页签栏的宽度。

sidebarWidth设置异常值或者undefined时，采用默认240vp的宽度。
优先级生效规则：sidebarWidth属性 > barWidth属性 > barModifier的width属性。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<Length>	是	Tabs侧边页签栏的宽度。

[h2]minSidebarWidth

minSidebarWidth(value: Optional<Length>)

设置Tabs侧边页签栏在分割线拖拽场景中的最小宽度，不使用该接口设置时不限制最小宽度，此时最小宽度默认为0。分割线拖拽规格详见sidebarDivider属性说明。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<Length>	是	Tabs侧边页签栏的最小宽度。设置undefined或者异常值时，不限制最小宽度，最小宽度为0。

参数名

类型

必填

说明

value

Optional<Length>

是

Tabs侧边页签栏的最小宽度。

设置undefined或者异常值时，不限制最小宽度，最小宽度为0。

[h2]maxSidebarWidth

maxSidebarWidth(value: Optional<Length>)

设置Tabs侧边页签栏在分割线拖拽场景中的最大宽度，不使用该接口设置时不限制最大宽度，此时最大可达到Tabs容器的宽度。分割线拖拽规格详见sidebarDivider属性说明。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<Length>	是	Tabs侧边页签栏的最大宽度。设置undefined或者异常值时，不限制最大宽度，最大可达到Tabs容器的宽度。

参数名

类型

必填

说明

value

Optional<Length>

是

Tabs侧边页签栏的最大宽度。

设置undefined或者异常值时，不限制最大宽度，最大可达到Tabs容器的宽度。

[h2]minContentWidth

minContentWidth(value: Optional<Length>)

设置Tabs显示侧边页签栏模式时，在分割线拖拽场景中内容区的最小宽度。不使用该接口设置属性时不限制最小宽度，此时最小宽度默认为0。分割线拖拽规格详见sidebarDivider属性说明。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<Length>	是	设置Tabs显示侧边页签栏模式时，内容区的最小宽度。设置undefined或者异常值时，不限制最小宽度，最小宽度为0。

参数名

类型

必填

说明

value

Optional<Length>

是

设置Tabs显示侧边页签栏模式时，内容区的最小宽度。

设置undefined或者异常值时，不限制最小宽度，最小宽度为0。

[h2]sidebarBackgroundColor

sidebarBackgroundColor(value: Optional<ResourceColor>)

设置Tabs侧边页签栏背景颜色。

sidebarBackgroundColor设置undefined时，恢复侧边页签栏默认背景颜色。
优先级生效规则：sidebarBackgroundColor属性 > barBackgroundColor属性 > barModifier的backgroundColor属性。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<ResourceColor>	是	Tabs侧边页签栏背景颜色。

[h2]sidebarBackgroundBlurStyle

sidebarBackgroundBlurStyle(value: Optional<BlurStyle>)

设置Tabs侧边页签栏背景模糊样式。

不使用sidebarBackgroundBlurStyle接口或者sidebarBackgroundBlurStyle设置undefined时，没有模糊效果，相当于设置BlurStyle.NONE。
优先级生效规则：sidebarBackgroundBlurStyle属性 > barBackgroundBlurStyle属性 > barModifier的backgroundBlurStyle属性。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<BlurStyle>	是	Tabs侧边页签栏背景模糊样式。

[h2]sidebarDivider

sidebarDivider(value: Optional<DividerStyle>)

设置Tabs侧边页签栏与内容区之间的分割线样式。

sidebarDivider属性的优先级高于Tabs的divider属性。
侧边页签栏不显示分割线时，不支持拖拽。
minSidebarWidth，maxSidebarWidth，minContentWidth属性都不设置时，不支持拖拽。
当minSidebarWidth >= maxSidebarWidth时属于异常场景，分割线无法拖拽。
当barStyle属性设置为TabBarStyle.SIDEBAR_ADAPTABLE，并且minSidebarWidth + minContentWidth > Tabs容器宽度时，因为宽度约束无法满足，会显示成TabBarDisplayMode.BOTTOM_TABBAR样式。

可以拖拽的场景下，分割线的拖拽范围见下表。最大值均需再减去dividerWidth（DividerStyle的strokeWidth，即分割线线宽）。

条件（设置有效值）	分割线的拖拽最小值（分割线与容器起始边界的距离）
设置minSidebarWidth属性	minSidebarWidth
不设置minSidebarWidth属性	0

条件（设置有效值）	分割线的拖拽最大值（分割线与容器起始边界的距离）
同时设置maxSidebarWidth和minContentWidth属性	（Tabs容器宽度 - minContentWidth）和maxSidebarWidth的较小值
仅设置maxSidebarWidth属性	maxSidebarWidth和Tabs容器宽度的较小值
仅设置minContentWidth属性	Tabs容器宽度 - minContentWidth
未设置maxSidebarWidth和minContentWidth属性	Tabs容器宽度

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
value	Optional<DividerStyle>	是	Tabs侧边页签栏与内容区之间的分割线样式。设置undefined时，不显示分割线。

参数名

类型

必填

说明

value

Optional<DividerStyle>

是

Tabs侧边页签栏与内容区之间的分割线样式。

设置undefined时，不显示分割线。

[h2]sidebarDisplayStyle

sidebarDisplayStyle(style: Optional<TabsSidebarDisplayStyle>)

设置Tabs的侧边栏展示模式。未通过该接口设置时，展示模式默认为TabsSidebarDisplayStyle.EMBED。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
style	Optional<TabsSidebarDisplayStyle>	是	侧边栏展示模式。设置undefined时，恢复默认展示模式。

参数名

类型

必填

说明

style

Optional<TabsSidebarDisplayStyle>

是

侧边栏展示模式。

设置undefined时，恢复默认展示模式。

DividerStyle¹⁰⁺对象说明

分割线样式对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
strokeWidth	Length	否	否	分割线的线宽（不支持百分比设置）。默认值：0.0 单位：vp 取值范围：[0, +∞)。
color	ResourceColor	否	是	分割线的颜色。默认值：#33182431
startMargin	Length	否	是	分割线与侧边栏顶端的距离（不支持百分比设置）。默认值：0.0 单位：vp 取值范围：[0, +∞)。
endMargin	Length	否	是	分割线与侧边栏底端的距离（不支持百分比设置）。默认值：0.0 单位：vp 取值范围：[0, +∞)。

BarGridColumnOptions¹⁰⁺对象说明

TabBar栅格化方式设置的对象，包括栅格模式下的column边距和间隔，以及小、中、大屏下，页签占用的columns数量。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
margin	Dimension	否	是	栅格模式下的column边距（不支持百分比设置）。默认值：24.0 单位：vp
gutter	Dimension	否	是	栅格模式下的column间隔（不支持百分比设置）。默认值：24.0 单位：vp
sm	number	否	是	小屏下，页签占用的columns数量，必须是非负偶数。小屏为大于等于320vp但小于600vp。默认值为-1，代表页签占用TabBar全部宽度。
md	number	否	是	中屏下，页签占用的columns数量，必须是非负偶数。中屏为大于等于600vp但小于800vp。默认值为-1，代表页签占用TabBar全部宽度。
lg	number	否	是	大屏下，页签占用的columns数量，必须是非负偶数。大屏为大于等于840vp但小于1024vp。默认值为-1，代表页签占用TabBar全部宽度。

ScrollableBarModeOptions¹⁰⁺对象说明

Scrollable模式下的TabBar的布局样式对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称

类型

只读

可选

说明

margin

Dimension

否

是

Scrollable模式下的TabBar的左右边距（不支持百分比设置）。

默认值：0.0

单位：vp

取值范围：[0, +∞)。

nonScrollableLayoutStyle

LayoutStyle

否

是

Scrollable模式下不滚动时的页签排布方式。

默认值：LayoutStyle.ALWAYS_CENTER

FloatingTabBarWidth

不同Tabs宽度下TabBar的宽度。

barWidth生效优先级高于该接口，barWidth和该接口都没有生效时，TabBar宽度使用默认计算规则。
TabBar宽度默认计算规则如下表。子节点数量等于4个时，TabBar最大宽度为328vp。子节点数量大于等于5个时，TabBar最大宽度为360vp。Tabs宽度大于等于1140vp时，TabBar的宽高会放大到1.15倍。

子节点数量	Tabs宽度	计算规则
小于等于2个	小于600vp	固定值168vp。
小于等于2个	大于等于600vp	固定值184vp。
3个	小于600vp	固定值248vp。
3个	大于等于600vp	固定值272vp。
大于等于4个	小于600vp	Tabs宽度 - 2 * barSideMargin。
大于等于4个	大于等于600vp，小于840vp	Tabs宽度 - 2 * (barSideMargin + 12vp + TabBar高度)。
大于等于4个	大于840vp	(Tabs宽度 / 2 - 2 * barSideMargin) * 2。

起始版本： 26.0.0

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.0开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
smallBarWidth	Length	否	是	Tabs宽度小于440vp时，TabBar的宽度。
mediumBarWidth	Length	否	是	Tabs宽度处于440vp到600vp之间，或宽度在600-840vp之间且高宽比小于0.8时，TabBar的宽度。
largeBarWidth	Length	否	是	Tabs宽度大于840vp，或宽度在600vp到840vp之间且高宽比大于0.8时，TabBar的宽度。

UIMaterial

type UIMaterial = import('../api/@ohos.arkui.uiMaterial').uiMaterial

系统材质模块。在设置tabBar悬浮样式系统材质属性时使用其中的ImmersiveMaterial类型。

起始版本： 26.0.0

元服务API： 从API版本26.0.0开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型	说明
import('../api/@ohos.arkui.uiMaterial').uiMaterial	系统材质模块。

FloatingTabBarStyle

TabBar悬浮样式。

起始版本： 26.0.0

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.0开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
barWidth	FloatingTabBarWidth	否	是	不同Tabs宽度下TabBar的宽度。宽度默认计算规则见FloatingTabBarWidth说明。
barSideMargin	Length	否	是	TabBar宽度默认计算规则中的左右边距。 Tabs宽度小于600vp时，默认值为16vp。Tabs宽度处于600vp到840vp时，默认值为24vp。Tabs宽度大于840vp时，默认值为32vp。
barBottomMargin	Length	否	是	TabBar距离Tabs底部的距离。默认值为28vp。
maskColor	ResourceColor	否	是	蒙层的颜色。蒙层显示区域在纵向会基于蒙层的颜色进行透明度渐变显示，从下到上不透明度变小。浅色模式下默认值为#CCF1F3F5，显示为白色。深色模式下默认值为#99000000，显示为黑色。
maskHeight	Length	否	是	蒙层的高度。蒙层显示上边缘默认比TabBar上边缘高16vp。
adaptToHandedness	boolean	否	是	是否跟随操作手左右布局显示。 true表示跟随操作手左右布局显示；false表示不跟随操作手左右布局显示。默认值：false
systemMaterial	UIMaterial.ImmersiveMaterial	否	是	TabBar的背板沉浸式材质样式。仅当Tabs为横向布局且barPosition为BarPosition.End时，底部TabBar的沉浸光感效果生效。

TabsSidebarSearchFilterCallback

type TabsSidebarSearchFilterCallback = (tabIndex: number, text: string) => boolean

Tabs侧边页签栏搜索框的搜索过滤函数。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名

类型

必填

说明

tabIndex

number

是

待判断是否进行过滤的页签索引。

取值范围：[0, 页签总数-1]，页签包含被搜索过滤隐藏的页签和通过tabBarVisibility属性隐藏的页签。

text

string

是

当前搜索文本。

返回值：

类型	说明
boolean	对应页签是否匹配搜索条件。true表示匹配，页签会显示；false表示不匹配，页签不显示。

TabsSidebarSearchableOptions

Tabs侧边页签栏的搜索选项。

页签默认搜索规则：在页签对应的文本信息中查找搜索输入框的内容（忽略大小写），如果能够找到，则认为页签匹配搜索条件，页签会显示；如果找不到则认为不匹配，页签不显示。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
searchText	ResourceStr	否	是	设置搜索文本框中的初始输入文本。
placeholder	ResourceStr	否	是	搜索输入框为空时的占位文本。
searchCallback	(text: string) => void	否	是	搜索文本变化时触发的回调。参数： text：当前搜索文本。
searchFilter	TabsSidebarSearchFilterCallback	否	是	过滤函数，用于判断某个页签是否匹配搜索条件。不设置时采用默认的搜索规则。

TabsBreakpointType<T>

不同Tabs容器断点下的值。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
sm	T	否	是	小尺寸Tabs容器下的值，小尺寸是指Tabs宽度属于范围：[0, 600vp)。
md	T	否	是	中尺寸Tabs容器下的值，中尺寸是指Tabs宽度属于范围：[600vp, 840vp)。
lg	T	否	是	大尺寸Tabs容器下的值，大尺寸是指Tabs宽度属于范围：[840vp, +∞)。

BarMode枚举说明

TabBar布局模式枚举。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
Scrollable	0	每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。
Fixed	1	所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。

AnimationMode¹²⁺枚举说明

点击TabBar页签时切换TabContent的动画形式枚举。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
CONTENT_FIRST	0	先加载目标页内容，再开始切换动画。元服务API：从API version 12开始，该接口支持在元服务中使用。
ACTION_FIRST	1	先开始切换动画，再加载目标页内容；生效需要同时满足：Tabs的height、width没有设置成auto。元服务API：从API version 12开始，该接口支持在元服务中使用。
NO_ANIMATION	2	关闭默认动画。调用TabsController的changeIndex接口切换TabContent时该枚举值不生效。可以通过设置animationDuration为0实现调用TabsController的changeIndex接口时不带动画。元服务API：从API version 12开始，该接口支持在元服务中使用。
CONTENT_FIRST_WITH_JUMP¹⁵⁺	3	先加载目标页内容，再无动画跳转到目标页附近，最后有动画跳转到目标页。元服务API：从API version 15开始，该接口支持在元服务中使用。
ACTION_FIRST_WITH_JUMP¹⁵⁺	4	先无动画跳转到目标页附近，再有动画跳转到目标页，最后加载目标页内容。此项生效需要同时满足：Tabs的height、width没有设置成auto。元服务API：从API version 15开始，该接口支持在元服务中使用。

LayoutStyle¹⁰⁺枚举说明

Scrollable模式下不滚动时的页签排布方式枚举。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称

值

说明

ALWAYS_CENTER

0

当页签内容超过TabBar宽度时，TabBar可滚动。

当页签内容不超过TabBar宽度时，TabBar不可滚动，页签紧凑居中。

ALWAYS_AVERAGE_SPLIT

1

当页签内容超过TabBar宽度时，TabBar可滚动。

当页签内容不超过TabBar宽度时，TabBar不可滚动，且所有页签平均分配TabBar宽度。

SPACE_BETWEEN_OR_CENTER

2

当页签内容超过TabBar宽度时，TabBar可滚动。

当页签内容不超过TabBar宽度但超过TabBar宽度一半时，TabBar不可滚动，页签紧凑居中。

当页签内容不超过TabBar宽度一半时，TabBar不可滚动，保证页签居中排列在TabBar宽度一半，且间距相同。

CommonModifier¹⁵⁺

type CommonModifier = import('../api/arkui/CommonModifier').CommonModifier

作为Tabs组件的参数对象。

元服务API： 从API version 15开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型	说明
import('../api/arkui/CommonModifier').CommonModifier	设置TabBar的通用属性。

TabsCacheMode¹⁹⁺枚举说明

子组件的缓存模式。

元服务API： 从API version 19开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
CACHE_BOTH_SIDE	0	缓存当前显示的子组件和其两侧的子组件。即当设置cachedMaxCount属性的count值为n时，最多缓存2n+1个子组件。
CACHE_LATEST_SWITCHED	1	缓存当前显示的子组件和最近切换过的子组件。即当设置cachedMaxCount属性的count值为n时，最多缓存n+1个子组件。

TabsNestedScrollMode²⁴⁺枚举说明

Tabs组件和父组件的嵌套滚动模式枚举。

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API version 24开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
SELF_ONLY	0	Tabs自身滚动，不与父组件联动。
SELF_FIRST	1	Tabs自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则Tabs触发边缘效果。

TabBarDisplayMode

不同Tabs容器断点下页签栏的实际显示模式枚举。该枚举用于barDisplayModeBreakpoint接口指定不同断点下的显示模式。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
BOTTOM_TABBAR	0	底部页签栏显示模式。可以通过vertical和barPosition属性调整页签栏实际显示位置。
SIDEBAR	1	侧边页签栏显示模式。可以通过sidebarPosition属性调整页签栏实际显示位置。

TabsSidebarDisplayStyle

侧边栏展示模式枚举。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	值	说明
EMBED	0	嵌入模式。侧边栏嵌入到容器内，与内容区并列显示。显示侧边栏时内容区宽度相应减少，侧边栏与内容区共同占满容器宽度。适用于需要同时展示侧边栏和内容区的场景。
DISPLACE	1	推挤模式。内容区宽度保持不变，显示侧边栏时将内容区部分区域挤出容器外。适用于需要保持内容区宽度不变的场景。

事件

除支持通用事件外，还支持以下事件：

[h2]onChange

onChange(event: Callback<number>)

Tab页签切换后触发的事件。

满足以下任一条件，即可触发该事件：

滑动页面进行页面切换时，组件滑动动画结束后触发。
通过控制器调用changeIndex接口，Tab页签切换后触发。
动态修改状态变量构造的index属性值，Tab页签切换后触发。
点击TabBar页签，Tab页签切换后触发。

使用自定义页签时，在onChange事件中联动可能会导致滑动页面切换后才执行页签联动，引起自定义页签切换效果延迟。建议在onAnimationStart中监听并刷新当前索引，以确保动效能够及时触发。具体实现可参考示例3。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
event	Callback<number>	是	当前显示的index索引，索引从0开始计算。

[h2]onTabBarClick¹⁰⁺

onTabBarClick(event: Callback<number>)

Tab页签点击后触发的事件。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
event	Callback<number>	是	被点击的index索引，索引从0开始计算。

[h2]onAnimationStart¹¹⁺

onAnimationStart(handler: OnTabsAnimationStartCallback)

切换动画开始时触发该回调。当animationDuration为0时动画关闭且scrollable为false时，不触发该回调。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
handler	OnTabsAnimationStartCallback	是	切换动画开始时触发的回调。

[h2]onAnimationEnd¹¹⁺

onAnimationEnd(handler: OnTabsAnimationEndCallback)

切换动画结束时触发该回调，包括动画过程中手势中断。当animationDuration为0时动画关闭，不触发该回调。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
handler	OnTabsAnimationEndCallback	是	切换动画结束时触发的回调。

[h2]onGestureSwipe¹¹⁺

onGestureSwipe(handler: OnTabsGestureSwipeCallback)

在页面跟手滑动过程中，逐帧触发该回调。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
handler	OnTabsGestureSwipeCallback	是	在页面跟手滑动过程中，逐帧触发的回调。

[h2]customContentTransition¹¹⁺

customContentTransition(delegate: TabsCustomContentTransitionCallback)

自定义Tabs页面切换动画。

使用说明：

当使用自定义切换动画时，Tabs组件自带的默认切换动画会被禁用，同时，页面也无法跟手滑动。
当设置为undefined时，表示不使用自定义切换动画，仍然使用组件自带的默认切换动画。
当前自定义切换动画不支持打断。
目前自定义切换动画只支持两种场景触发：点击页签和调用TabsController.changeIndex()接口。
当使用自定义切换动画时，Tabs组件支持的事件中，除了onGestureSwipe，其他事件均支持。
onChange和onAnimationEnd事件的触发时机需要特殊说明：如果在第一次自定义动画执行过程中，触发了第二次自定义动画，那么在开始第二次自定义动画时，就会触发第一次自定义动画的onChange和onAnimationEnd事件。
当使用自定义动画时，参与动画的页面布局方式会改为Stack布局。如果开发者未主动设置相关页面的zIndex属性，那么所有页面的zIndex值是一样的，页面的渲染层级会按照在组件树上的顺序（即页面的index值顺序）确定。因此，开发者需要主动修改页面的zIndex属性，来控制页面的渲染层级。
此属性不支持在attributeModifier中调用。

从API version 20开始，该接口支持在attributeModifier中调用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
delegate	TabsCustomContentTransitionCallback	是	自定义Tabs页面切换动画开始时触发的回调。

[h2]onContentWillChange¹²⁺

onContentWillChange(handler: OnTabsContentWillChangeCallback)

自定义Tabs页面切换拦截事件能力，新页面即将显示时触发该回调。

满足以下任一条件，即可触发该事件：

滑动TabContent切换新页面时触发。
通过TabsController.changeIndex接口切换新页面时触发。
通过动态修改index属性值切换新页面时触发。
通过点击TabBar页签切换新页面时触发。
TabBar页签获焦后，通过键盘左右方向键等切换新页面时触发。

从API version 20开始，该接口支持在attributeModifier中调用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
handler	OnTabsContentWillChangeCallback	是	自定义Tabs页面切换拦截事件能力，新页面即将显示时触发的回调。

[h2]onSelected¹⁸⁺

onSelected(event: Callback<number>)

当选中元素改变时触发该回调，返回值为当前选中的元素的索引值。

满足以下任一条件，即可触发该事件：

滑动离手时满足翻页阈值，开始切换动画时触发。
通过TabsController控制器调用changeIndex接口，开始切换动画时触发。
动态修改状态变量构造的index属性值后触发。
通过页签处点击触发。

onSelected回调中不可通过TabsOptions的index设置当前显示页的索引，不可调用TabsController.changeIndex()方法。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
event	Callback<number>	是	当前选中元素的索引。

[h2]onUnselected¹⁸⁺

onUnselected(event: Callback<number>)

当选中元素改变时触发该回调，返回值为将要隐藏的元素的索引值。

满足以下任一条件，即可触发该事件：

滑动离手时满足翻页阈值，开始切换动画时触发。
通过TabsController控制器调用changeIndex接口，开始切换动画时触发。
动态修改状态变量构造的index属性值后触发。
通过页签处点击触发。

onUnselected回调中不可通过TabsOptions的index设置当前显示页的索引，不可调用TabsController.changeIndex()方法。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
event	Callback<number>	是	将要隐藏元素的索引。

[h2]onContentDidScroll²³⁺

onContentDidScroll(handler: OnTabsContentDidScrollCallback | undefined)

监听Tabs页面滑动事件。

在页面滑动过程中，会对视窗内所有页面逐帧触发OnTabsContentDidScrollCallback回调。例如，当视窗内有下标为0、1的两个页面时，会每帧触发两次index值分别为0和1的回调。

元服务API： 从API version 23开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
handler	OnTabsContentDidScrollCallback \| undefined	是	Tabs滑动时触发的回调，undefined会解绑原有回调。

[h2]onBarDisplayModeChange

onBarDisplayModeChange(callback: Optional<Callback<TabBarDisplayMode>>)

页签栏显示模式切换事件。使用callback异步回调。

起始版本： 26.0.1

模型约束： 此接口仅可在Stage模型下使用。

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
callback	Optional<Callback<TabBarDisplayMode>>	是	当Tabs的显示模式发生切换时，触发该回调。

OnTabsAnimationStartCallback¹⁸⁺

type OnTabsAnimationStartCallback = (index: number, targetIndex: number, extraInfo: TabsAnimationEvent) => void

切换动画开始时触发的回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
index	number	是	当前显示元素的索引，索引从0开始。
targetIndex	number	是	切换动画目标元素的索引，索引从0开始。
extraInfo	TabsAnimationEvent	是	动画相关信息，包括主轴方向上当前显示元素和目标元素相对Tabs起始位置的位移，以及离手速度。

OnTabsAnimationEndCallback¹⁸⁺

type OnTabsAnimationEndCallback = (index: number, extraInfo: TabsAnimationEvent) => void

切换动画结束时触发的回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
index	number	是	当前显示元素的索引，索引从0开始。
extraInfo	TabsAnimationEvent	是	动画相关信息，只返回主轴方向上当前显示元素相对于Tabs起始位置的位移。

OnTabsGestureSwipeCallback¹⁸⁺

type OnTabsGestureSwipeCallback = (index: number, extraInfo: TabsAnimationEvent) => void

在页面跟手滑动过程中，逐帧触发的回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名

类型

必填

说明

index

number

是

当前显示元素的索引，索引从0开始。

取值范围：[0, 索引值-1]

extraInfo

TabsAnimationEvent

是

动画相关信息，只返回主轴方向上当前显示元素相对于Tabs起始位置的位移。

TabsCustomContentTransitionCallback¹⁸⁺

type TabsCustomContentTransitionCallback = (from: number, to: number) => TabContentAnimatedTransition | undefined

自定义Tabs页面切换动画开始时触发的回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名

类型

必填

说明

from

number

是

动画开始时，当前页面的index值，索引从0开始。

取值范围：[0, 索引值-1]，当设置的值超过索引值或小于0时无转场动画。

to

number

是

动画开始时，目标页面的index值，索引从0开始。

取值范围：[0, 索引值-1]，当设置的值超过索引值或小于0时无转场动画。

返回值：

类型	说明
TabContentAnimatedTransition \| undefined	自定义切换动画相关信息。

OnTabsContentWillChangeCallback¹⁸⁺

type OnTabsContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean

自定义Tabs页面切换拦截事件能力，新页面即将显示时触发的回调。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
currentIndex	number	是	当前显示页面的index索引，索引从0开始计算。
comingIndex	number	是	将要显示的新页面的index索引。

返回值：

类型

说明

boolean

当回调函数handler的返回值为true时，Tabs可以切换到新页面。

当回调函数handler的返回值为false时，Tabs无法切换到新页面，仍然显示原来页面内容。

TabsAnimationEvent¹¹⁺对象说明

Tabs组件动画相关信息集合。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	只读	可选	说明
currentOffset	number	否	否	Tabs当前显示元素在主轴方向上，相对于Tabs起始位置的位移。单位vp，默认值为0。
targetOffset	number	否	否	Tabs动画目标元素在主轴方向上，相对于Tabs起始位置的位移。单位vp，默认值为0。
velocity	number	否	否	Tabs离手动画开始时的离手速度。单位vp/s，默认值为0。

TabContentAnimatedTransition¹¹⁺

Tabs自定义切换动画相关信息。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称

类型

只读

可选

说明

timeout

number

否

是

Tabs自定义切换动画超时时间。从自定义动画开始切换计时，如果到达该时间后，开发者仍未调用TabContentTransitionProxy的finishTransition接口通知Tabs组件自定义动画结束，那么组件就会认为此次自定义动画已结束，直接执行后续操作。

默认值：1000

单位：ms

取值范围：[0, +∞)。

transition

Callback<TabContentTransitionProxy>

否

自定义切换动画具体内容。

TabContentTransitionProxy¹¹⁺

Tabs自定义切换动画执行过程中，返回给开发者的proxy对象。开发者可通过该对象获取自定义动画的起始和目标页面信息，同时，也可以通过调用该对象的finishTransition接口通知Tabs组件自定义动画已结束。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

[h2]属性

名称	类型	只读	可选	说明
from	number	否	否	自定义动画起始页面对应的index值，索引从0开始。
to	number	否	否	自定义动画目标页面对应的index值，索引从0开始。

[h2]finishTransition¹¹⁺

finishTransition(): void

通知Tabs组件，此页面的自定义动画已结束。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

OnTabsContentDidScrollCallback²³⁺

type OnTabsContentDidScrollCallback = (selectedIndex: number, index: number, position: number, mainAxisLength: number) => void

Tabs滑动时触发的回调。

例如，当前选中的页签索引为0，从第0页切换到第1页的动画过程中，每帧都会对视窗内所有页面触发回调，当视窗内有第0页和第1页两页时，每帧会触发两次回调。其中，第一次回调的selectedIndex为0、index为0、position为当前帧第0页相对于动画开始前第0页的移动比例，mainAxisLength为主轴方向上第0页的长度。第二次回调的selectedIndex仍为0、index为1、position为当前帧第1页相对于动画开始前第0页的移动比例，mainAxisLength为主轴方向上第1页的长度。
若动画曲线为弹簧插值曲线，从第0页切换到第1页的动画过程中，可能会因为离手时的位置和速度，先过滑到第2页，再回弹到第1页，该过程中每帧会对视窗内第1页和第2页触发回调。

元服务API： 从API version 23开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
selectedIndex	number	是	当前选中页面的索引。例如，当前选中的页签索引为0，从第0页切换到第1页的动画过程中，每一次回调的selectedIndex都为0。
index	number	是	视窗内页面的索引。例如，页面滑动过程中，视窗内有第0页和第1页两页时，每帧会触发两次回调。其中，第一次回调的index为0，第二次回调的index为1。
position	number	是	index页面相对于Tabs主轴起始位置（selectedIndex对应页面的起始位置）的移动比例。例如，一个横向Tabs中，当前选中的页签索引为0，从第0页往左切换到第1页的动画过程中，若刚好有一帧第0页和第1页分别占用视窗的30%和70%时，当前帧会触发两次回调。其中，第一次回调的position为-0.7，表示当前帧第0页在Tabs主轴起始位置的左侧，且第0页左侧位置距离Tabs主轴起始位置为视窗的70%，即第0页往左移动了视窗70%的距离。第二次回调的position为0.3，表示当前帧第1页在Tabs主轴起始位置的右侧，且第1页左侧位置距离Tabs主轴起始位置为视窗的30%，实际上第1页也是往左移动了视窗70%的距离。
mainAxisLength	number	是	index对应页面在主轴方向上的长度，单位vp。例如，某一次回调的index为0，这一次回调的mainAxisLength为360，则表示当前帧第0页在主轴方向上的长度为360vp。横向Tabs代表的是页面宽度，竖向Tabs代表的是页面高度。

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

[h2]constructor

constructor()

TabsController的构造函数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

[h2]changeIndex

changeIndex(value: number): void

控制Tabs切换到指定页签。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名

类型

必填

说明

value

number

是

页签在Tabs里的索引值，索引值从0开始。

说明：

设置小于0或大于最大数量的值时，取默认值0。

[h2]preloadItems¹²⁺

preloadItems(indices: Optional<Array<number>>): Promise<void>

控制Tabs预加载指定子节点。调用该接口后会一次性加载所有指定的子节点，因此为了性能考虑，建议分批加载子节点。

Tabs的preloadItems需要在Tabs创建之后去调用，首次预加载推荐在Tabs的onAppear生命周期中去控制。
如果TabsController对象未绑定任何Tabs组件，直接调用该接口，会抛出JS异常。因此使用该接口时，建议通过try-catch捕获异常。
使用preloadItems预加载标签页时，若需自定义TabBar上的显示内容，推荐使用ComponentContent实现，使用示例请参考示例10。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名

类型

必填

说明

indices

Optional<Array<number>>

是

需预加载的子节点的下标数组。

默认值：空数组。

返回值：

类型	说明
Promise<void>	预加载完成后触发的回调。

错误码：

以下错误码的详细介绍请参见通用错误码。

错误码ID	错误信息
401	Parameter invalid. Possible causes: 1. The parameter type is not Array<number>; 2. The parameter is an empty array; 3. The parameter contains an invalid index.

[h2]setTabBarTranslate¹³⁺

setTabBarTranslate(translate: TranslateOptions): void

设置TabBar的平移距离。

当使用bindTabsToScrollable或bindTabsToNestedScrollable等接口绑定了Tabs组件和可滚动容器组件后，在滑动可滚动容器组件时，会触发所有与其绑定的Tabs组件的TabBar的显示和隐藏动效，调用setTabBarTranslate接口设置的TabBar平移距离会失效。因此不建议同时使用bindTabsToScrollable、bindTabsToNestedScrollable和setTabBarTranslate接口。

元服务API： 从API version 13开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
translate	TranslateOptions	是	设置TabBar的平移距离。

[h2]setTabBarOpacity¹³⁺

setTabBarOpacity(opacity: number): void

设置TabBar的不透明度。

当使用bindTabsToScrollable或bindTabsToNestedScrollable等接口绑定了Tabs组件和可滚动容器组件后，在滑动可滚动容器组件时，会触发所有与其绑定的Tabs组件的TabBar的显示和隐藏动效，调用setTabBarOpacity接口设置的TabBar不透明度会失效。因此不建议同时使用bindTabsToScrollable、bindTabsToNestedScrollable和setTabBarOpacity接口。

元服务API： 从API version 13开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名

类型

必填

说明

opacity

number

是

设置TabBar的不透明度，取值范围为[0.0, 1.0]，设置的值小于0.0时，按0.0处理，设置的值大于1.0时，按1.0处理。

默认值：1.0。

[h2]getBarDisplayMode

getBarDisplayMode(): TabBarDisplayMode

获取当前Tabs组件的显示模式。

起始版本： 26.0.1

元服务API： 从API版本26.0.1开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型	说明
TabBarDisplayMode	当前Tabs组件的显示模式。

示例

[h2]示例1（设置TabBar的布局模式）

本示例通过barMode分别实现了页签均分布局和以实际长度布局，且展示了当页签布局长度之和超过了TabBar总长度后可滑动的效果。

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State text: string = '文本';
  @State barMode: BarMode = BarMode.Fixed;

  build() {
    Column() {
      Row() {
        Button('文本增加 ')
          .width('47%')
          .height(50)
          .onClick((event?: ClickEvent) => {
            this.text += '文本增加';
          })
          .margin({ right: '6%', bottom: '12vp' })

        Button('文本重置')
          .width('47%')
          .height(50)
          .onClick((event?: ClickEvent) => {
            this.text = '文本';
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('BarMode.Fixed')
          .width('47%')
          .height(50)
          .onClick((event?: ClickEvent) => {
            this.barMode = BarMode.Fixed;
          })
          .margin({ right: '6%', bottom: '12vp' })

        Button('BarMode.Scrollable')
          .width('47%')
          .height(50)
          .onClick((event?: ClickEvent) => {
            this.barMode = BarMode.Scrollable;
          })
          .margin({ bottom: '12vp' })
      }

      Tabs() {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(SubTabBarStyle.of(this.text))
      }
      .height('60%')
      .backgroundColor(0xf1f3f5)
      .barMode(this.barMode)
    }
    .width('100%')
    .height(500)
    .padding('24vp')
  }
}

[h2]示例2（设置Scrollable模式下的TabBar的布局样式）

本示例实现了barMode的ScrollableBarModeOptions参数，该参数仅在Scrollable模式下有效。

// xxx.ets
@Entry
@Component
struct TabsExample6 {
  private controller: TabsController = new TabsController();
  @State scrollMargin: number = 0;
  @State layoutStyle: LayoutStyle = LayoutStyle.ALWAYS_CENTER;
  @State text: string = '文本';

  build() {
    Column() {
      Row() {
        Button('scrollMargin+10 ' + this.scrollMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.scrollMargin += 10;
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button('scrollMargin-10 ' + this.scrollMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.scrollMargin -= 10;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('文本增加 ')
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.text += '文本增加';
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button('文本重置')
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.text = '文本';
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('layoutStyle.ALWAYS_CENTER')
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) => {
            this.layoutStyle = LayoutStyle.ALWAYS_CENTER;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('layoutStyle.ALWAYS_AVERAGE_SPLIT')
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) => {
            this.layoutStyle = LayoutStyle.ALWAYS_AVERAGE_SPLIT;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('layoutStyle.SPACE_BETWEEN_OR_CENTER')
          .width('100%')
          .height(50)
          .margin({ top: 5 })
          .fontSize(15)
          .onClick((event?: ClickEvent) => {
            this.layoutStyle = LayoutStyle.SPACE_BETWEEN_OR_CENTER;
          })
          .margin({ bottom: '12vp' })
      }

      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(SubTabBarStyle.of(this.text))
      }
      .animationDuration(300)
      .height('60%')
      .backgroundColor(0xf1f3f5)
      .barMode(BarMode.Scrollable, { margin: this.scrollMargin, nonScrollableLayoutStyle: this.layoutStyle })
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('24vp')
  }
}

[h2]示例3（自定义页签切换联动）

本示例通过onAnimationStart、onChange实现切换时自定义tabBar和TabContent的联动。

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State currentIndex: number = 0;
  @State selectedIndex: number = 0;
  private controller: TabsController = new TabsController();

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.tabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.tabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.tabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        // currentIndex控制TabContent显示页签
        this.currentIndex = index;
        this.selectedIndex = index;
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return;
        }
        // selectedIndex控制自定义TabBar内Text颜色切换
        this.selectedIndex = targetIndex;
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

[h2]示例4（分割线基本属性）

本示例通过divider实现了分割线各种属性的展示。

// xxx.ets
@Entry
@Component
struct TabsDivider1 {
  private controller1: TabsController = new TabsController();
  @State dividerColor: string = 'red';
  @State strokeWidth: number = 2;
  @State startMargin: number = 0;
  @State endMargin: number = 0;
  @State nullFlag: boolean = false;

  build() {
    Column() {
      Tabs({ controller: this.controller1 }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Red)
        }.tabBar('red')
      }
      .vertical(true)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .barWidth(70)
      .barHeight(200)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString());
      })
      .height('200vp')
      .margin({ bottom: '12vp' })
      .divider(this.nullFlag ? null : {
        strokeWidth: this.strokeWidth,
        color: this.dividerColor,
        startMargin: this.startMargin,
        endMargin: this.endMargin
      })

      Button('常规Divider').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.nullFlag = false;
          this.strokeWidth = 2;
          this.dividerColor = 'red';
          this.startMargin = 0;
          this.endMargin = 0;
        })
      Button('空Divider').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.nullFlag = true;
        })
      Button('颜色变为蓝色').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.dividerColor = 'blue';
        })
      Button('宽度增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.strokeWidth += 2;
        })
      Button('宽度减小').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          if (this.strokeWidth > 2) {
            this.strokeWidth -= 2;
          }
        })
      Button('上边距增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.startMargin += 2;
        })
      Button('上边距减少').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          if (this.startMargin > 2) {
            this.startMargin -= 2;
          }
        })
      Button('下边距增加').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          this.endMargin += 2;
        })
      Button('下边距减少').width('100%').margin({ bottom: '12vp' })
        .onClick(() => {
          if (this.endMargin > 2) {
            this.endMargin -= 2;
          }
        })
    }.padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

[h2]示例5（设置TabBar渐隐）

本示例通过fadingEdge实现了切换子页签渐隐和不渐隐。

// xxx.ets
@Entry
@Component
struct TabsOpaque {
  private controller: TabsController = new TabsController();
  private controller1: TabsController = new TabsController();
  @State selfFadingFade: boolean = true;

  build() {
    Column() {
      Button('子页签设置渐隐').width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) => {
          this.selfFadingFade = true;
        })
      Button('子页签设置不渐隐').width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) => {
          this.selfFadingFade = false;
        })
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(80)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString());
      })
      .fadingEdge(this.selfFadingFade)
      .height('30%')
      .width('100%')

      Tabs({ barPosition: BarPosition.Start, controller: this.controller1 }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('pink')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('green')
      }
      .vertical(true)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(200)
      .barWidth(80)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString());
      })
      .fadingEdge(this.selfFadingFade)
      .height('30%')
      .width('100%')
    }
    .padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

[h2]示例6（设置TabBar叠加在TabContent内容上）

本示例通过barOverlap实现了TabBar是否背后变模糊并叠加在TabContent之上。

// xxx.ets
@Entry
@Component
struct barHeightTest {
  @State arr: number[] = [0, 1, 2, 3];
  @State barOverlap: boolean = true;

  build() {
    Column() {
      Text(`barOverlap ${this.barOverlap}`).fontSize(16)
      Button('barOverlap变化').width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) => {
          if (this.barOverlap) {
            this.barOverlap = false;
          } else {
            this.barOverlap = true;
          }
        })

      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Column() {
            List({ space: 10 }) {
              ForEach(this.arr, (item: number) => {
                ListItem() {
                  Text('item' + item).width('80%').height(200).fontSize(16).textAlign(TextAlign.Center).backgroundColor('#fff8b81e')
                }
              }, (item: string) => item)
            }.width('100%').height('100%')
            .lanes(2).alignListItem(ListItemAlign.Center)
          }.width('100%').height('100%')
          .backgroundColor(Color.Pink)
        }
        .tabBar(new BottomTabBarStyle($r('sys.media.ohos_icon_mask_svg'), '测试0'))
      }
      .scrollable(false)
      .height('60%')
      .barOverlap(this.barOverlap)
    }
    .height(500)
    .padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}

[h2]示例7（设置TabBar栅格化可见区域）

本示例通过barGridAlign实现了以栅格化方式设置TabBar的可见区域。

// xxx.ets
@Entry
@Component
struct TabsExample5 {
  private controller: TabsController = new TabsController();
  @State gridMargin: number = 10;
  @State gridGutter: number = 10;
  @State sm: number = -2;
  @State clickedContent: string = '';

  build() {
    Column() {
      Row() {
        Button('gridMargin+10 ' + this.gridMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridMargin += 10;
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button('gridMargin-10 ' + this.gridMargin)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridMargin -= 10;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('gridGutter+10 ' + this.gridGutter)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridGutter += 10;
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button('gridGutter-10 ' + this.gridGutter)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.gridGutter -= 10;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('sm+2 ' + this.sm)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.sm += 2;
          })
          .margin({ right: '6%' })
        Button('sm-2 ' + this.sm).width('47%').height(50).margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.sm -= 2;
          })
      }

      Text('点击内容:' + this.clickedContent).width('100%').height(200).margin({ top: 5 })


      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(BottomTabBarStyle.of($r('sys.media.ohos_app_icon'), '1'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(BottomTabBarStyle.of($r('sys.media.ohos_app_icon'), '2'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(BottomTabBarStyle.of($r('sys.media.ohos_app_icon'), '3'))
      }
      .width('350vp')
      .animationDuration(300)
      .height('60%')
      .barGridAlign({ sm: this.sm, margin: this.gridMargin, gutter: this.gridGutter })
      .backgroundColor(0xf1f3f5)
      .onTabBarClick((index: number) => {
        this.clickedContent += 'now index ' + index + ' is clicked\n';
      })
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('10vp')
  }
}

[h2]示例8（自定义Tabs页面切换动画）

本示例通过customContentTransition实现了自定义Tabs页面的切换动画。

// xxx.ets
interface itemType {
  text: string,
  backgroundColor: Color
}

@Entry
@Component
struct TabsCustomAnimationExample {
  @State data: itemType[] = [
    {
      text: 'Red',
      backgroundColor: Color.Red
    },
    {
      text: 'Yellow',
      backgroundColor: Color.Yellow
    },
    {
      text: 'Blue',
      backgroundColor: Color.Blue
    }];
  @State opacityList: number[] = [];
  @State scaleList: number[] = [];

  private durationList: number[] = [];
  private timeoutList: number[] = [];
  private customContentTransition: (from: number, to: number) => TabContentAnimatedTransition = (from: number, to: number) => {
    let tabContentAnimatedTransition = {
      timeout: this.timeoutList[from],
      transition: (proxy: TabContentTransitionProxy) => {
        this.scaleList[from] = 1.0;
        this.scaleList[to] = 0.5;
        this.opacityList[from] = 1.0;
        this.opacityList[to] = 0.5;
        this.getUIContext()?.animateTo({
          duration: this.durationList[from],
          onFinish: () => {
            proxy.finishTransition();
          }
        }, () => {
          this.scaleList[from] = 0.5;
          this.scaleList[to] = 1.0;
          this.opacityList[from] = 0.5;
          this.opacityList[to] = 1.0;
        });
      }
    } as TabContentAnimatedTransition;
    return tabContentAnimatedTransition;
  };

  aboutToAppear(): void {
    let duration = 1000;
    let timeout = 1000;
    for (let i = 1; i <= this.data.length; i++) {
      this.opacityList.push(1.0);
      this.scaleList.push(1.0);
      this.durationList.push(duration * i);
      this.timeoutList.push(timeout * i);
    }
  }

  build() {
    Column() {
      Tabs() {
        ForEach(this.data, (item: itemType, index: number) => {
          TabContent() {}
          .tabBar(item.text)
          .backgroundColor(item.backgroundColor)
          // 自定义动画变化透明度、缩放页面等
          .opacity(this.opacityList[index])
          .scale({ x: this.scaleList[index], y: this.scaleList[index] })
        })
      }
      .backgroundColor(0xf1f3f5)
      .width('100%')
      .height(500)
      .customContentTransition(this.customContentTransition)
    }
  }
}

[h2]示例9（页面切换拦截）

本示例通过onContentWillChange实现了自定义页面手势滑动切换拦截。

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State selectedIndex: number = 2;
  @State currentIndex: number = 2;
  private controller: TabsController = new TabsController();

  @Builder tabBuilder(title: string,targetIndex: number) {
    Column(){
      // $r('app.media.star_fill')需要替换为开发者所需的图像资源文件
      // $r('app.media.star')需要替换为开发者所需的图像资源文件
      Image(this.selectedIndex === targetIndex ? $r('app.media.star_fill') : $r('app.media.star'))
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(title).fontColor(this.selectedIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }.width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }
  
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column(){
            Text('首页的内容')
          }.width('100%').height('100%').backgroundColor('#00CB87').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('首页',0))

        TabContent() {
          Column(){
            Text('发现的内容')
          }.width('100%').height('100%').backgroundColor('#007DFF').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('发现',1))

        TabContent() {
          Column(){
            Text('推荐的内容')
          }.width('100%').height('100%').backgroundColor('#FFBF00').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('推荐',2))

        TabContent() {
          Column(){
            Text('我的内容')
          }.width('100%').height('100%').backgroundColor('#E67C92').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('我的',3))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(60)
      .animationDuration(0)
      .onChange((index: number) => {
        this.currentIndex = index;
        this.selectedIndex = index;
      })
      .width(360)
      .height(600)
      .backgroundColor('#F1F3F5')
      .scrollable(true)
      .onContentWillChange((currentIndex, comingIndex) => {
        if (comingIndex == 2) {
          return false;
        }
        return true;
      })

      Button('动态修改index').width('50%').margin({ top: 20 })
        .onClick(()=>{
          this.currentIndex = (this.currentIndex + 1) % 4;
        })

      Button('changeIndex').width('50%').margin({ top: 20 })
        .onClick(()=>{
          this.currentIndex = (this.currentIndex + 1) % 4;
          this.controller.changeIndex(this.currentIndex);
        })
    }.width('100%')
  }
}

[h2]示例10（自定义TabBar切换动画）

本示例通过onChange、onAnimationStart、onAnimationEnd、onGestureSwipe等接口实现了自定义TabBar的切换动画。

// EntryAbility.ets
import { Configuration, UIAbility } from '@kit.AbilityKit';
import { i18n } from '@kit.LocalizationKit';
import { CommonUtil } from '../common/CommonUtil';

export default class EntryAbility extends UIAbility {
  onConfigurationUpdate(newConfig: Configuration): void {
    // 监听系统配置变化
    if (newConfig.language) {
      CommonUtil.setIsRTL(i18n.isRTL(newConfig.language));
    }
  }
}

// CommonUtil.ets
export class CommonUtil {
  private static isRTL: boolean = false;

  public static setIsRTL(isRTL: boolean): void {
    CommonUtil.isRTL = isRTL;
  }

  public static getIsRTL(): boolean {
    return CommonUtil.isRTL;
  }
}

// xxx.ets
import { LengthMetrics } from '@kit.ArkUI';
import { CommonUtil } from '../common/CommonUtil';

@Entry
@Component
struct TabsExample {
  @State colorArray: [string, string][] =
    [['green', '#00CB87'], ['blue', '#007DFF'], ['yellow', '#FFBF00'], ['pink', '#E67C92']];
  @State currentIndex: number = 0;
  @State animationDuration: number = 300;
  @State indicatorLeftMargin: number = 0;
  @State indicatorWidth: number = 0;
  private tabsWidth: number = 0;
  private textInfos: [number, number][] = [];
  private isStartAnimateTo: boolean = false;

  aboutToAppear():void {
    for (let i = 0; i < this.colorArray.length; i++) {
      this.textInfos.push([0, 0]);
    }
  }

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontSize(16)
        .fontColor(this.currentIndex === index ? '#007DFF' : '#182431')
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .id(index.toString())
        .onAreaChange((oldValue: Area, newValue: Area) => {
          this.textInfos[index] = [newValue.globalPosition.x as number, newValue.width as number];
          if (!this.isStartAnimateTo && this.currentIndex === index && this.tabsWidth > 0) {
            this.setIndicatorAttr(this.textInfos[this.currentIndex][0], this.textInfos[this.currentIndex][1]);
          }
        })
    }.width('100%')
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Tabs({ barPosition: BarPosition.Start }) {
        ForEach(this.colorArray, (item: [string, string], index:number) => {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(item[1])
          }.tabBar(this.tabBuilder(index, item[0]))
        })
      }
      .onAreaChange((oldValue: Area, newValue: Area)=> {
        this.tabsWidth = newValue.width as number;
        if (!this.isStartAnimateTo) {
          this.setIndicatorAttr(this.textInfos[this.currentIndex][0], this.textInfos[this.currentIndex][1]);
        }
      })
      .barWidth('100%')
      .barHeight(56)
      .width('100%')
      .height(296)
      .backgroundColor('#F1F3F5')
      .animationDuration(this.animationDuration)
      .onChange((index: number) => {
        this.currentIndex = index; // 监听索引index的变化，实现页签内容的切换。
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
        this.currentIndex = targetIndex;
        this.startAnimateTo(this.animationDuration, this.textInfos[targetIndex][0], this.textInfos[targetIndex][1]);
      })
      .onAnimationEnd((index: number, event: TabsAnimationEvent) => {
        // 切换动画结束时触发该回调。下划线动画停止。
        let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event);
        this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width);
      })
      .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
        // 在页面跟手滑动过程中，逐帧触发该回调。
        let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event);
        this.currentIndex = currentIndicatorInfo.index;
        this.setIndicatorAttr(currentIndicatorInfo.left, currentIndicatorInfo.width);
      })

      Column()
        .height(2)
        .width(this.indicatorWidth)
        .margin({ start: LengthMetrics.vp(this.indicatorLeftMargin), top: LengthMetrics.vp(48) })
        .backgroundColor('#007DFF')
    }.width('100%')
  }

  private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
    let nextIndex = index;
    if (index > 0 && (CommonUtil.getIsRTL() ? event.currentOffset < 0 : event.currentOffset > 0)) {
      nextIndex--;
    } else if (index < this.textInfos.length - 1 &&
        (CommonUtil.getIsRTL() ? event.currentOffset > 0 : event.currentOffset < 0)) {
      nextIndex++;
    }
    let indexInfo = this.textInfos[index];
    let nextIndexInfo = this.textInfos[nextIndex];
    let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth);
    let currentIndex = swipeRatio > 0.5 ? nextIndex : index; // 页面滑动超过一半，tabBar切换到下一页。
    let currentLeft = indexInfo[0] + (nextIndexInfo[0] - indexInfo[0]) * swipeRatio;
    let currentWidth = indexInfo[1] + (nextIndexInfo[1] - indexInfo[1]) * swipeRatio;
    return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth };
  }

  private startAnimateTo(duration: number, leftMargin: number, width: number) {
    this.isStartAnimateTo = true;
    this.getUIContext()?.animateTo({
      duration: duration, // 动画时长
      curve: Curve.Linear, // 动画曲线
      iterations: 1, // 播放次数
      playMode: PlayMode.Normal, // 动画模式
      onFinish: () => {
        this.isStartAnimateTo = false;
        console.info('play end');
      }
    }, () => {
      this.setIndicatorAttr(leftMargin, width);
    });
  }

  private setIndicatorAttr(leftMargin: number, width: number) {
    this.indicatorWidth = width;
    if (CommonUtil.getIsRTL()) {
      this.indicatorLeftMargin = this.tabsWidth - leftMargin - width;
    } else {
      this.indicatorLeftMargin = leftMargin;
    }
  }
}

[h2]示例11（预加载子节点）

本示例通过preloadItems接口实现了预加载指定子节点。

// xxx.ets
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct TabsPreloadItems {
  @State currentIndex: number = 1;
  private tabsController: TabsController = new TabsController();

  build() {
    Column() {
      Tabs({ index: this.currentIndex, controller: this.tabsController }) {
        TabContent() {
          MyComponent({ color: '#00CB87' })
        }.tabBar(SubTabBarStyle.of('green'))

        TabContent() {
          MyComponent({ color: '#007DFF' })
        }.tabBar(SubTabBarStyle.of('blue'))

        TabContent() {
          MyComponent({ color: '#FFBF00' })
        }.tabBar(SubTabBarStyle.of('yellow'))

        TabContent() {
          MyComponent({ color: '#E67C92' })
        }.tabBar(SubTabBarStyle.of('pink'))
      }
      .width(360)
      .height(296)
      .backgroundColor('#F1F3F5')
      .onChange((index: number) => {
        this.currentIndex = index;
      })

      Button('preload items: [0, 2, 3]')
        .margin(5)
        .onClick(() => {
          // 预加载第0、2、3个子节点，提高滑动或点击切换至这些节点时的性能
          this.tabsController.preloadItems([0, 2, 3])
            .then(() => {
              console.info('preloadItems success.');
            })
            .catch((error: BusinessError) => {
              console.error('preloadItems failed, error code: ' + error.code + ', error message: ' + error.message);
            })
        })
    }
  }
}

@Component
struct MyComponent {
  private color: string = '';

  aboutToAppear(): void {
    console.info('aboutToAppear backgroundColor:' + this.color);
  }

  aboutToDisappear(): void {
    console.info('aboutToDisappear backgroundColor:' + this.color);
  }

  build() {
    Column()
      .width('100%')
      .height('100%')
      .backgroundColor(this.color)
  }
}

[h2]示例12（设置TabBar平移距离和不透明度）

本示例通过setTabBarTranslate、setTabBarOpacity等接口设置了TabBar的平移距离和不透明度。

// xxx.ets
@Entry
@Component
struct TabsExample {
  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Button('设置TabBar的平移距离').margin({ top: 20 })
        .onClick(() => {
          this.controller.setTabBarTranslate({ x: -20, y: -20 });
        })

      Button('设置TabBar的透明度').margin({ top: 20 })
        .onClick(() => {
          this.controller.setTabBarOpacity(0.5);
        })

      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(BottomTabBarStyle.of($r('app.media.startIcon'), 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(BottomTabBarStyle.of($r('app.media.startIcon'), 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(BottomTabBarStyle.of($r('app.media.startIcon'), 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(BottomTabBarStyle.of($r('app.media.startIcon'), 'pink'))
      }
      .width(360)
      .height(296)
      .margin({ top: 20 })
      .barBackgroundColor('#F1F3F5')
    }
    .width('100%')
  }
}

[h2]示例13（页面懒加载和释放）

本示例通过使用自定义TabBar与Swiper配合LazyForEach实现页面懒加载和释放。

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = [];

  constructor(list: number[]) {
    this.list = list;
  }

  totalCount(): number {
    return this.list.length;
  }

  getData(index: number): number {
    return this.list[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct TabsSwiperExample {
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State currentIndex: number = 0;
  private list: number[] = [];
  private tabsController: TabsController = new TabsController();
  private swiperController: SwiperController = new SwiperController();
  private swiperData: MyDataSource = new MyDataSource([]);

  aboutToAppear(): void {
    for (let i = 0; i <= 9; i++) {
      this.list.push(i);
    }
    this.swiperData = new MyDataSource(this.list);
  }

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('20%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.tabsController }) {
        ForEach(this.list, (item: number) => {
          TabContent().tabBar(this.tabBuilder(item, '页签 ' + this.list[item]))
        })
      }
      .onTabBarClick((index: number) => {
        this.currentIndex = index;
        this.swiperController.changeIndex(index, true);
      })
      .barMode(BarMode.Scrollable)
      .backgroundColor('#F1F3F5')
      .height(56)
      .width('100%')

      Swiper(this.swiperController) {
        LazyForEach(this.swiperData, (item: string) => {
          Text(item.toString())
            .onAppear(()=>{
              console.info('onAppear ' + item.toString());
            })
            .onDisAppear(()=>{
              console.info('onDisAppear ' + item.toString());
            })
            .width('100%')
            .height('100%')
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .loop(false)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        this.currentIndex = targetIndex;
        this.tabsController.changeIndex(targetIndex);
      })
    }
  }
}

[h2]示例14（设置翻页动效）

本示例通过设置animationMode属性，实现了翻页的动效。

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State currentIndex: number = 0;
  @State currentAnimationMode: AnimationMode = AnimationMode.CONTENT_FIRST;
  private controller: TabsController = new TabsController();
  private data: number[] = [];

  aboutToAppear(): void {
    for (let i = 0; i < 10; i++) {
      this.data.push(i);
    }
  }

  @Builder
  tabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title).fontColor(this.currentIndex === targetIndex ? '#FF0000' : '#6B6B6B')
    }.width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {
        ForEach(this.data, (item: number) => {
          TabContent() {
            Column() {
              Text('' + item)
            }.width('100%').height('100%').backgroundColor('#00CB87').justifyContent(FlexAlign.Center)
          }.tabBar(this.tabBuilder('P' + item, item))
        }, (item: number) => item.toString())
      }
      .barWidth(360)
      .barHeight(60)
      .animationMode(this.currentAnimationMode)
      .animationDuration(4000)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .width(360)
      .height(120)
      .backgroundColor('#F1F3F5')

      Text('AnimationMode:' + AnimationMode[this.currentAnimationMode])

      Button('AnimationMode').width('50%').margin({ top: 1 }).height(25)
        .onClick(() => {
          if (this.currentAnimationMode === AnimationMode.CONTENT_FIRST) {
            this.currentAnimationMode = AnimationMode.ACTION_FIRST;
          } else if (this.currentAnimationMode === AnimationMode.ACTION_FIRST) {
            this.currentAnimationMode = AnimationMode.NO_ANIMATION;
          } else if (this.currentAnimationMode === AnimationMode.NO_ANIMATION) {
            this.currentAnimationMode = AnimationMode.CONTENT_FIRST_WITH_JUMP;
          } else if (this.currentAnimationMode === AnimationMode.CONTENT_FIRST_WITH_JUMP) {
            this.currentAnimationMode = AnimationMode.ACTION_FIRST_WITH_JUMP;
          } else if (this.currentAnimationMode === AnimationMode.ACTION_FIRST_WITH_JUMP) {
            this.currentAnimationMode = AnimationMode.CONTENT_FIRST;
          }
        })
    }.width('100%')
  }
}

[h2]示例15（页签超出TabBar区域显示）

该示例通过使用TabsOptions中的barModifier设置tabBar的clip属性实现页签超出tabBar区域显示效果。

从API version 15开始，在TabsOptions中新增了barModifier接口。

// xxx.ets
import { CommonModifier } from '@kit.ArkUI';

@Entry
@Component
struct TabsBarModifierExample {
  @State selectedIndex: number = 2;
  @State currentIndex: number = 2;
  @State isClip: boolean = false;
  @State tabBarModifier: CommonModifier = new CommonModifier();
  private controller: TabsController = new TabsController();

  aboutToAppear(): void {
    this.tabBarModifier.clip(this.isClip);
  }

  @Builder
  tabBuilder(title: string, targetIndex: number) {
    Column() {
      Image($r('app.media.startIcon')).width(30).height(30)
      Text(title).fontColor(this.selectedIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }.width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .offset({ y: this.selectedIndex === targetIndex ? -15 : 0 })
  }

  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End,
        index: this.currentIndex,
        controller: this.controller,
        barModifier: this.tabBarModifier
      }) {
        TabContent() {
          Column() {
            Text('首页的内容')
          }.width('100%').height('100%').backgroundColor('#00CB87').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('首页', 0))

        TabContent() {
          Column() {
            Text('发现的内容')
          }.width('100%').height('100%').backgroundColor('#007DFF').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('发现', 1))

        TabContent() {
          Column() {
            Text('推荐的内容')
          }.width('100%').height('100%').backgroundColor('#FFBF00').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('推荐', 2))

        TabContent() {
          Column() {
            Text('我的内容')
          }.width('100%').height('100%').backgroundColor('#E67C92').justifyContent(FlexAlign.Center)
        }.tabBar(this.tabBuilder('我的', 3))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(340)
      .barHeight(60)
      .onChange((index: number) => {
        this.currentIndex = index;
        this.selectedIndex = index;
      })
      .width(340)
      .height(400)
      .backgroundColor('#F1F3F5')
      .scrollable(true)

      Button('isClip: ' + this.isClip)
        .margin({ top: 30 })
        .onClick(() => {
          this.isClip = !this.isClip;
          this.tabBarModifier.clip(this.isClip);
        })
    }.width('100%')
  }
}

[h2]示例16（页签对齐布局）

本示例通过使用TabsOptions中的barModifier设置tabBar的align属性实现页签对齐布局效果。

从API version 15开始，在TabsOptions中新增了barModifier接口。

// xxx.ets
import { CommonModifier } from '@kit.ArkUI';

@Entry
@Component
struct TabsBarModifierExample {
  private controller: TabsController = new TabsController();
  @State text: string = '文本';
  @State isVertical: boolean = false;
  @State tabBarModifier: CommonModifier = new CommonModifier();

  build() {
    Column() {
      Row() {
        Button('Alignment.Start ')
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.tabBarModifier.align(Alignment.Start);
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button('Alignment.End')
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.tabBarModifier.align(Alignment.End);
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('Alignment.Center')
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.tabBarModifier.align(Alignment.Center);
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button('isVertical: ' + this.isVertical)
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.isVertical = !this.isVertical;
          })
          .margin({ bottom: '12vp' })
      }

      Row() {
        Button('Alignment.Top')
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.tabBarModifier.align(Alignment.Top);
          })
          .margin({ right: '6%', bottom: '12vp' })
        Button('Alignment.Bottom')
          .width('47%')
          .height(50)
          .margin({ top: 5 })
          .onClick((event?: ClickEvent) => {
            this.tabBarModifier.align(Alignment.Bottom);
          })
          .margin({ bottom: '12vp' })
      }

      Tabs({ barPosition: BarPosition.End, controller: this.controller, barModifier: this.tabBarModifier }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar(SubTabBarStyle.of(this.text))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar(SubTabBarStyle.of(this.text))
      }
      .vertical(this.isVertical)
      .height('60%')
      .backgroundColor(0xf1f3f5)
      .barMode(BarMode.Scrollable)
    }
    .width('100%')
    .height(500)
    .margin({ top: 5 })
    .padding('24vp')
  }
}

[h2]示例17（Tabs与TabBar同步切换）

该示例通过onSelected接口，实现了Tabs与TabBar的同步切换。

从API version 18开始，新增了onSelected接口。

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State currentIndex: number = 0;
  @State selectedIndex: number = 0;
  private controller: TabsController = new TabsController();

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.tabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.tabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.tabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .animationMode(AnimationMode.CONTENT_FIRST)
      .onChange((index: number) => {
        console.info('onChange index:' + index);
        this.currentIndex = index;
      })
      .onSelected((index: number) => {
        console.info('onSelected index:' + index);
        this.selectedIndex = index;
      })
      .onUnselected((index: number) => {
        console.info('onUnselected index:' + index);
      })
      .width('100%')
      .height('100%')
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

[h2]示例18（释放Tabs子组件）

该示例通过设置cachedMaxCount属性，实现了Tabs子组件的释放。

从API version 19开始，新增了cachedMaxCount接口。

@Entry
@Component
struct TabsExample {
  build() {
    Tabs() {
      TabContent() {
        MyComponent({ color: '#00CB87' })
      }.tabBar(SubTabBarStyle.of('green'))

      TabContent() {
        MyComponent({ color: '#007DFF' })
      }.tabBar(SubTabBarStyle.of('blue'))

      TabContent() {
        MyComponent({ color: '#FFBF00' })
      }.tabBar(SubTabBarStyle.of('yellow'))

      TabContent() {
        MyComponent({ color: '#E67C92' })
      }.tabBar(SubTabBarStyle.of('pink'))
    }
    .width(360)
    .height(296)
    .backgroundColor('#F1F3F5')
    .cachedMaxCount(1, TabsCacheMode.CACHE_BOTH_SIDE)
  }
}

@Component
struct MyComponent {
  private color: string = '';

  aboutToAppear(): void {
    console.info('aboutToAppear backgroundColor:' + this.color);
  }

  aboutToDisappear(): void {
    console.info('aboutToDisappear backgroundColor:' + this.color);
  }

  build() {
    Column()
      .width('100%')
      .height('100%')
      .backgroundColor(this.color)
  }
}

[h2]示例19（设置TabBar背景模糊效果）

该示例分别通过barBackgroundBlurStyle和barBackgroundEffect设置TabBar页签栏的背景模糊样式和效果。

从API version 18开始，新增了barBackgroundBlurStyle和barBackgroundEffect接口。

// xxx.ets
@Entry
@Component
struct TabsExample {
  build() {
    Column() {
      // barBackgroundBlurStyle 可以通过枚举值的方式设置模糊参数
      Stack() {
        Image($r('app.media.startIcon'))
        Tabs() {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#00CB87')
          }.tabBar('green')

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#007DFF')
          }.tabBar('blue')

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#FFBF00')
          }.tabBar('yellow')

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#E67C92')
          }.tabBar('pink')
        }
        .barBackgroundBlurStyle(BlurStyle.COMPONENT_THICK,
          { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
      }
      .width(300)
      .height(300)
      .margin(10)

      // barBackgroundEffect 可以自定义设置tabBar页签栏的模糊半径、亮度、饱和度等参数
      Stack() {
        Image($r('app.media.startIcon'))
        Tabs() {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#00CB87')
          }.tabBar('green')

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#007DFF')
          }.tabBar('blue')

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#FFBF00')
          }.tabBar('yellow')

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#E67C92')
          }.tabBar('pink')
        }
        .barBackgroundEffect({ radius: 20, brightness: 0.6, saturation: 15 })
      }
      .width(300)
      .height(300)
      .margin(10)
    }
  }
}

[h2]示例20（设置边缘滑动效果）

该示例通过edgeEffect实现了不同的边缘回弹效果。

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State edgeEffect: EdgeEffect = EdgeEffect.Spring;

  build() {
    Column() {
      Tabs() {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar('pink')
      }
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
      .edgeEffect(this.edgeEffect)

      Button('EdgeEffect.Spring').width('50%').margin({ top: 20 })
        .onClick(() => {
          this.edgeEffect = EdgeEffect.Spring;
        })

      Button('EdgeEffect.Fade').width('50%').margin({ top: 20 })
        .onClick(() => {
          this.edgeEffect = EdgeEffect.Fade;
        })

      Button('EdgeEffect.None').width('50%').margin({ top: 20 })
        .onClick(() => {
          this.edgeEffect = EdgeEffect.None;
        })
    }.width('100%')
  }
}

[h2]示例21（Tabs设置翻页动画曲线）

该示例展示了如何通过animationCurve接口设置Tabs翻页动画曲线，并结合animationDuration设置翻页动画的时长。

从API version 20开始，新增了animationCurve接口。

import { curves } from '@kit.ArkUI';

interface TabsItemType {
  text: string,
  backgroundColor: ResourceColor
}

@Entry
@Component
struct TabsExample {
  private tabsController: TabsController = new TabsController();
  private curves: (Curve | ICurve) [] = [
    curves.interpolatingSpring(-1, 1, 328, 34),
    curves.springCurve(10, 1, 228, 30),
    curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0),
  ];
  private curveNames: string[] = [
    'interpolatingSpring(-1, 1, 328, 34)',
    'springCurve(10, 1, 228, 30)',
    'cubicBezierCurve(0.25, 0.1, 0.25, 1.0)'
  ];
  @State curveIndex: number = 0;
  private data: TabsItemType[] = [
    { text: '1', backgroundColor: '#004AAF' },
    { text: '2', backgroundColor: '#2787D9' },
    { text: '3', backgroundColor: '#D5D5D5' },
    { text: '4', backgroundColor: '#707070' },
    { text: '5', backgroundColor: '#F7F7F7' },
  ];
  @State duration: number = 0;

  build() {
    Column({ space: 2 }) {
      Tabs({ controller: this.tabsController }) {
        ForEach(this.data, (item: TabsItemType, index: number) => {
          TabContent() {
          }
          .tabBar(item.text)
          .backgroundColor(item.backgroundColor)
        })
      }
      .backgroundColor(0xf1f3f5)
      .width('100%')
      .height(500)
      .animationCurve(this.curves[this.curveIndex])
      .animationDuration(this.duration)

      Column({ space: 2 }) {
        Text('Curve:' + this.curveNames[this.curveIndex])
        Row({ space: 2 }) {
          // 切换动效曲线
          Button('++').onClick(() => {
            this.curveIndex = (this.curveIndex + 1) % this.curves.length;
          })
          Button('reset').onClick(() => {
            this.curveIndex = 0;
          })
        }
      }
      .margin({ left: '10vp' })
      .width('100%')

      Row({ space: 2 }) {
        Text('Duration:' + this.duration)
        // 增加动效时长
        Button('+100').onClick(() => {
          this.duration = (this.duration + 100) % 10000;
        })
        Button('+1000').onClick(() => {
          this.duration = (this.duration + 1000) % 10000;
        })
        Button('reset').onClick(() => {
          this.duration = 0;
        })
      }
      .margin({ left: '10vp' })
      .width('100%')
    }
    .margin('10vp')
  }
}

[h2]示例22（监听Tabs页面滑动事件）

该示例展示了如何通过onContentDidScroll接口设置Tabs滑动时的回调。

从API version 23开始，新增onContentDidScroll接口。

// xxx.ets
@Entry
@Component
struct TabsDidScrollExample {
  @State fontColor: string = '#182431';
  @State selectedFontColor: string = '#007DFF';
  @State currentIndex: number = 0;
  @State selectedIndex: number = 0;
  @State didScrollStr: string = '';
  private controller: TabsController = new TabsController();

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Text('滑动页面触发回调')
        .width("80%")
        .fontSize(20)
        .margin(5)
        .textAlign(TextAlign.Center)

      Text(this.didScrollStr)
        .width("80%")
        .fontSize(20)
        .margin(5)
        .textAlign(TextAlign.Center)

      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.tabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.tabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.tabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        // currentIndex控制TabContent显示页签
        this.currentIndex = index;
        this.selectedIndex = index;
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return;
        }
        // selectedIndex控制自定义TabBar内Text颜色切换
        this.selectedIndex = targetIndex;
      })
      .width(360)
      .height(296)
      .margin({ top: 15 })
      .backgroundColor('#F1F3F5')
      .onContentDidScroll((selectedIndex: number, index: number, position: number, mainAxisLength: number) => {
        // 监听Tabs页面滑动事件，在该回调中可以实现自定义导航点切换动画等
        console.info("onContentDidScroll selectedIndex: " + selectedIndex + ", index: " + index + ", position: " +
          position + ", mainAxisLength: " + mainAxisLength);
        this.didScrollStr =
          "onContentDidScroll selectedIndex: " + selectedIndex + ", index: " + index + ", position: " +
            position + ", mainAxisLength: " + mainAxisLength
      })
    }.width('100%')
  }
}

[h2]示例23（Tabs嵌套滚动）

该示例展示了如何通过nestedScroll接口设置Tabs嵌套滚动效果。

从API version 24开始，新增nestedScroll接口。

// xxx.ets
@Entry
@Component
struct TabsExample {
  @State text: string = '文本';
  @State barMode: BarMode = BarMode.Fixed;
  build() {
    Column() {
      Row() {

        Tabs() {
          TabContent() {
            Tabs() {
              TabContent() {
                Column().width('100%').height('100%').backgroundColor(Color.Blue)
              }.tabBar(SubTabBarStyle.of('子页a'))

              TabContent() {
                Column().width('100%').height('100%').backgroundColor(Color.Green)
              }.tabBar(SubTabBarStyle.of('子页b'))

              TabContent() {
                Column().width('100%').height('100%').backgroundColor(Color.Pink)
              }.tabBar(SubTabBarStyle.of('子页c'))
            }
            .nestedScroll(TabsNestedScrollMode.SELF_FIRST)
          }.tabBar(SubTabBarStyle.of("首页1"))


          TabContent() {
            Tabs() {
              TabContent() {
                Column().width('100%').height('100%').backgroundColor(Color.Blue)
              }.tabBar(SubTabBarStyle.of('子页d'))

              TabContent() {
                Column().width('100%').height('100%').backgroundColor(Color.Green)
              }.tabBar(SubTabBarStyle.of('子页e'))

              TabContent() {
                Column().width('100%').height('100%').backgroundColor(Color.Pink)
              }.tabBar(SubTabBarStyle.of('子页f'))
            }
            .nestedScroll(TabsNestedScrollMode.SELF_FIRST)
          }.tabBar(SubTabBarStyle.of('首页2'))

        }
        .height('100%')
        .backgroundColor(0xf1f3f5)
        .barMode(this.barMode)
      }
      .width('100%')
      .height('100%')
      .padding('24vp')
    }
  }
}

[h2]示例24（TabBar悬浮样式）

本示例展示了如何通过barFloatingStyle接口设置TabBar的悬浮样式和背板沉浸式材质。

该示例配图为高算力设备强档效果，组件沉浸光感效果会根据设备算力与用户在系统中设置的沉浸光感效果自适应调整，开发者无需额外适配。

从API版本26.0.0开始，新增barFloatingStyle接口。

// xxx.ets
import { uiMaterial } from '@kit.ArkUI';
@Entry
@Component
struct TabsFloatingStyleExample {
  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }.tabBar('Blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }.tabBar('Green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Orange)
        }.tabBar('Orange')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }.tabBar('Pink')
      }
      .barFloatingStyle({
        adaptToHandedness: true, systemMaterial: new uiMaterial.ImmersiveMaterial(
          {
            style: uiMaterial.ImmersiveStyle.ULTRA_THIN,
            applyShadow: true,
            interactive: true,
            lightEffect: { color: Color.White }
          }
        )
      })
      .barOverlap(true)
      .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

该示例配图为高算力设备强档效果：

[h2]示例25（设置侧边页签栏样式）

本示例展示了通过barStyle接口设置页签栏的显示样式，包括固定底部页签栏样式、固定侧边页签栏样式、自适应侧边页签栏样式；通过sidebarPosition接口设置侧边页签的显示位置；通过sidebarHeader接口在侧边页签栏头部设置自定义内容；通过sidebarSearchable接口开启侧边页签栏的搜索功能；通过[onBarDisplayModeChange]#onbardisplaymodechange)接口注册显示模式切换的监听函数。

从API版本26.0.1开始，新增barStyle、sidebarPosition、sidebarHeader、sidebarSearchable、onBarDisplayModeChange接口。

// xxx.ets
import { ComponentContent } from '@kit.ArkUI';

@Builder
function TestHeaderBuilder() {
  Stack({alignContent: Alignment.Center}) {
    Stack({alignContent: Alignment.Center}) {
    }
    .width(64)
    .height(64)
    .backgroundColor('#ff2787d9')
  }
  .width('100%')
  .height(128)
  .border({width: 1, color: '#ffd9d9d9' })
}

@Entry
@Component
struct TabsSidebarExample {
  @State myBarStyle: TabBarStyle = TabBarStyle.BOTTOM;
  @State tabsWidth: number = 550;
  @State searchText: string = '';
  @State currentIndex: number = 0;

  build() {
    Column() {
      Column() {
        Row() {
          Text('barStyle: ').fontSize(25)
          Button('BOTTOM').onClick(() => {
            this.myBarStyle = TabBarStyle.BOTTOM;
          }).margin({right: 10}).fontSize(15).backgroundColor('#ff2787d9')
          Button('SIDEBAR').onClick(() => {
            this.myBarStyle = TabBarStyle.SIDEBAR;
          }).margin({right: 10}).fontSize(15).backgroundColor('#ff2787d9')
          Button('SIDEBAR_ADAPTABLE').onClick(() => {
            this.myBarStyle = TabBarStyle.SIDEBAR_ADAPTABLE;
          }).fontSize(15).backgroundColor('#ff2787d9')
        }.width('100%')
        .justifyContent(FlexAlign.Center)
        Row() {
          Text('Tabs width: ').fontSize(25)
          Button('550').onClick(() => {
            this.tabsWidth = 550;
          }).margin({right: 20}).backgroundColor('#ff2787d9')
          Button('700').onClick(() => {
            this.tabsWidth = 700;
          }).margin({right: 20}).backgroundColor('#ff2787d9')
          Button('850').onClick(() => {
            this.tabsWidth = 850;
          }).backgroundColor('#ff2787d9')
        }.width('100%').margin({top: 5})
        .justifyContent(FlexAlign.Center)
      }.width('100%')
      .height('18%')
      Tabs() {
        TabContent() {
          Stack({alignContent: Alignment.Center}) {
            Text('TabContent1').fontSize(25)
          }.width('100%').height('100%')
        }.tabBar({icon: $r('app.media.startIcon'), text: 'tab1'})
        TabContent() {
          Stack({alignContent: Alignment.Center}) {
            Text('TabContent2').fontSize(25)
          }.width('100%').height('100%')
        }.tabBar({icon: $r('app.media.startIcon'), text: 'tab2'})
        TabContent() {
          Stack({alignContent: Alignment.Center}) {
            Text('TabContent3').fontSize(25)
          }.width('100%').height('100%')
        }
        .tabBar({icon: $r('app.media.startIcon'), text: 'tab3'})
      }
      .height('65%')
      .width(this.tabsWidth)
      .vertical(false)
      .barPosition(BarPosition.End)
      .barBackgroundColor('#fff7f7f7')
      .border({width: 1, color: '#ffd9d9d9'})
      // 设置Tabs显示样式
      .barStyle(this.myBarStyle)
      // 设置侧边页签栏显示在起始侧
      .sidebarPosition(BarPosition.Start)
      // 设置侧边页签栏头部内容
      .sidebarHeader(new ComponentContent(this.getUIContext(), wrapBuilder(TestHeaderBuilder)))
      // 设置侧边页签栏搜索选项
      .sidebarSearchable({
        placeholder: 'Search tabs',
        searchCallback: (text: string) => {
          this.searchText = text;
          console.info(`search text: ${text}`);
        }
      })
      // 可以通过onBarDisplayModeChange接口监听显示模式切换的事件
      .onBarDisplayModeChange((mode: TabBarDisplayMode) => {
        console.info(`testTag TabBarDisplayMode change to ${mode}`)
      })
    }
    .width('100%')
    .height(600)
  }
}

[h2]示例26（设置侧边栏展示模式）

本示例展示了如何通过sidebarDisplayStyle接口设置Tabs的侧边栏展示模式，切换嵌入模式（EMBED）和推挤模式（DISPLACE）。

从API版本26.0.1开始，新增sidebarDisplayStyle接口。

// xxx.ets
@Entry
@Component
struct TabsSideBarDemo {
  @State isDisplace: boolean = false;

  build() {
    Column() {
      // sidebarDisplayStyle切换
      Row({ space: 12 }) {
        Text('EMBED')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor(!this.isDisplace ? '#409EFF' : '#C0C4CC')
          .padding({ top: 6, bottom: 6, left: 16, right: 16 })
          .borderRadius(20)
          .onClick(() => {
            this.isDisplace = false;
          })

        Text('DISPLACE')
          .fontSize(14)
          .fontColor('#FFFFFF')
          .backgroundColor(this.isDisplace ? '#67C23A' : '#C0C4CC')
          .padding({ top: 6, bottom: 6, left: 16, right: 16 })
          .borderRadius(20)
          .onClick(() => {
            this.isDisplace = true;
          })
      }
      .padding({ top: 8, bottom: 8 })

      Tabs() {
        TabContent() {
          Column() {
            Text('首页内容')
              .fontSize(24)
              .fontColor('#409EFF')
          }
          .width('100%')
          .height('100%')
          .justifyContent(FlexAlign.Center)
          .backgroundColor('#EBF5FF')
        }
        .tabBar('首页')
      }
      .barStyle(TabBarStyle.SIDEBAR)
      .sidebarDisplayStyle(this.isDisplace ? TabsSidebarDisplayStyle.DISPLACE : TabsSidebarDisplayStyle.EMBED)
      .scrollable(true)
      .animationDuration(300)
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}

[h2]示例27（设置侧边页签栏内容的显示效果）

本示例展示了通过以下接口控制侧边页签栏内容的显示效果。

通过sidebarWidth接口设置侧边页签栏的宽度。
通过sidebarBackgroundColor接口设置侧边页签栏的背景颜色。
通过sidebarBackgroundBlurStyle接口设置侧边页签栏的背景模糊样式。
通过sidebarSelectedIconColor接口设置侧边页签栏中选中态页签的图标颜色。
通过sidebarSelectedTextColor接口设置侧边页签栏中选中态页签的文本颜色。
通过sidebarUnselectedIconColor接口设置侧边页签栏中非选中态页签的图标颜色。
通过sidebarUnselectedTextColor接口设置侧边页签栏中非选中态页签的文本颜色。
通过sidebarSelectedBoardColor接口设置侧边页签栏中选中页签的背板颜色。

从API版本26.0.1开始，新增sidebarWidth、sidebarBackgroundColor、sidebarBackgroundBlurStyle、sidebarSelectedTextColor、sidebarSelectedIconColor、sidebarUnselectedTextColor、sidebarUnselectedIconColor、sidebarSelectedBoardColor接口。

// xxx.ets
@Entry
@Component
struct TabsSidebarContentStyleExample {
  private testArr: Array<number> = new Array();

  aboutToAppear(): void {
    for (let i = 0; i < 6; i++) {
      this.testArr.push(i);
    }
  }

  build() {
    Tabs() {
      ForEach(this.testArr, (data: number) => {
        TabContent() {
          Stack({alignContent: Alignment.Center}) {
            Text(`TabContent${data}`)
          }
          .width('100%')
          .height('100%')
        }
        // 请开发者将$r('app.media.arrow')替换为实际的资源
        .tabBar({icon: $r('app.media.arrow'), text: `TabContent${data}`})
      }, (data: number) => data.toString())
    }
    .height('400')
    .width('400')
    .backgroundColor('#fffffbf0')
    // 设置Tabs为侧边页签栏样式
    .barStyle(TabBarStyle.SIDEBAR)
    // 设置侧边页签栏的宽度
    .sidebarWidth('190')
    // 设置侧边页签栏的背景颜色
    .sidebarBackgroundColor('#80f6fcf5')
    // 设置侧边页签栏的背景模糊样式
    .sidebarBackgroundBlurStyle(BlurStyle.Thin)
    // 设置侧边页签栏的选中页签的图标颜色
    .sidebarSelectedIconColor('#ffa10a21')
    // 设置侧边页签栏的选中页签的文本颜色
    .sidebarSelectedTextColor('#ffa10a21')
    // 设置侧边页签栏的非选中页签的图标颜色
    .sidebarUnselectedIconColor('#ffffc000')
    // 设置侧边页签栏的非选中页签的文本颜色
    .sidebarUnselectedTextColor('#ffffc000')
    // 设置侧边页签栏的选中页签的背板颜色
    .sidebarSelectedBoardColor('#ffe3fff9')
  }
}

[h2]示例28（设置侧边页签栏模式下分割线支持拖拽效果）

本示例展示了通过以下接口实现侧边页签栏模式下分割线支持拖拽并指定拖拽范围的效果。

通过sidebarDivider接口设置侧边页签栏的分割线样式。
通过minSidebarWidth接口设置侧边页签栏的最小宽度。
通过maxSidebarWidth接口设置侧边页签栏的最大宽度。
通过minContentWidth接口设置内容区的最小宽度。

从API版本26.0.1开始，新增sidebarDivider、minSidebarWidth、maxSidebarWidth、minContentWidth接口。

// xxx.ets
@Entry
@Component
struct TabsSidebarDraggableExample {
  private testArr: Array<number> = new Array();

  aboutToAppear(): void {
    for (let i = 0; i < 3; i++) {
      this.testArr.push(i);
    }
  }

  build() {
    Tabs() {
      ForEach(this.testArr, (data: number) => {
        TabContent() {
          Stack({alignContent: Alignment.Center}) {
            Text(`TabContent${data}`)
          }
          .width('100%')
          .height('100%')
        }
        // 请开发者将$r('app.media.arrow')替换为实际的资源
        .tabBar({icon: $r('app.media.arrow'), text: `TabContent${data}`})
      }, (data: number) => data.toString())
    }
    .height('400')
    .width('800')
    .backgroundColor('#fffffbf0')
    // 设置Tabs为侧边页签栏样式
    .barStyle(TabBarStyle.SIDEBAR)
    // 设置侧边页签栏对应的分割线样式
    .sidebarDivider({
      strokeWidth: 1,
      color: '#ff707070',
      startMargin: 5,
      endMargin: 5
    })
    // 设置侧边页签栏的最小宽度
    .minSidebarWidth('190')
    // 设置侧边页签栏的最大宽度
    .maxSidebarWidth('40%')
    // 设置内容区的最小宽度
    .minContentWidth('360')
  }
}

[h2]示例29（自定义显示模式断点）

本示例展示了通过barDisplayModeBreakpoint接口实现自定义显示模式断点的功能。

从API版本26.0.1开始，新增barDisplayModeBreakpoint接口。

// xxx.ets
@Entry
@Component
struct TabsSidebarBreakpointExample {
  private testArr: Array<number> = new Array();
  @State tabsWidth: number = 590;

  aboutToAppear(): void {
    for (let i = 0; i < 6; i++) {
      this.testArr.push(i);
    }
  }

  build() {
    Column() {
      Row() {
        Text('Tabs width: ').fontSize(25)
        Button('590').onClick(() => {
          this.tabsWidth = 590;
        }).fontSize(15).backgroundColor('#ff2787d9')
        Button('650').onClick(() => {
          this.tabsWidth = 650;
        }).fontSize(15).backgroundColor('#ff2787d9')
        Button('850').onClick(() => {
          this.tabsWidth = 850;
        }).fontSize(15).backgroundColor('#ff2787d9')
      }
      .width(400)
      .height(100)
      .justifyContent(FlexAlign.SpaceAround)
      Tabs() {
        ForEach(this.testArr, (data: number) => {
          TabContent() {
            Stack({alignContent: Alignment.Center}) {
              Text(`TabContent${data}`)
            }
            .width('100%')
            .height('100%')
          }
          // 请开发者将$r('app.media.arrow')替换为实际的资源
          .tabBar({icon: $r('app.media.arrow'), text: `TabContent${data}`})
        }, (data: number) => data.toString())
      }
      .height('400')
      .width(this.tabsWidth)
      .border({width: 1, color: '#ffd9d9d9'})
      .backgroundColor("#fffffbf0")
      // 设置Tabs为自适应样式
      .barStyle(TabBarStyle.SIDEBAR_ADAPTABLE)
      // 设置自定义显示断点
      .barDisplayModeBreakpoint({
        // 设定[0, 600vp)宽度范围时显示为TabBarDisplayMode.BOTTOM_TABBAR模式
        sm: TabBarDisplayMode.BOTTOM_TABBAR,
        // 设定[600vp, 840vp)宽度范围时显示为TabBarDisplayMode.BOTTOM_TABBAR模式
        md: TabBarDisplayMode.BOTTOM_TABBAR,
        // 设定[840vp, +∞)宽度范围时显示为TabBarDisplayMode.SIDEBAR模式
        lg: TabBarDisplayMode.SIDEBAR
      })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

目录

Tabs

子组件

接口

TabsOptions15+

BarPosition枚举说明

TabBarStyle

属性

[h2]vertical

[h2]scrollable

[h2]barMode

[h2]barMode10+

[h2]barMode10+

[h2]barWidth

[h2]barHeight

[h2]barHeight20+

[h2]animationCurve20+

[h2]animationDuration

[h2]animationMode12+

[h2]barPosition9+

[h2]divider10+

[h2]fadingEdge10+

[h2]barOverlap10+

[h2]barBackgroundColor10+

[h2]barBackgroundBlurStyle11+

[h2]barBackgroundBlurStyle18+

[h2]barGridAlign10+

[h2]edgeEffect12+

[h2]barBackgroundEffect18+

[h2]pageFlipMode15+

[h2]cachedMaxCount19+

[h2]nestedScroll24+

[h2]barFloatingStyle

[h2]barStyle

[h2]sidebarPosition

[h2]sidebarHeader

[h2]sidebarSearchable

[h2]barDisplayModeBreakpoint

[h2]sidebarSelectedIconColor

[h2]sidebarSelectedTextColor

[h2]sidebarUnselectedIconColor

[h2]sidebarUnselectedTextColor

[h2]sidebarSelectedBoardColor

[h2]sidebarWidth

[h2]minSidebarWidth

[h2]maxSidebarWidth

[h2]minContentWidth

[h2]sidebarBackgroundColor

[h2]sidebarBackgroundBlurStyle

[h2]sidebarDivider

[h2]sidebarDisplayStyle

DividerStyle10+对象说明

BarGridColumnOptions10+对象说明

ScrollableBarModeOptions10+对象说明

FloatingTabBarWidth

UIMaterial

FloatingTabBarStyle

TabsSidebarSearchFilterCallback

TabsSidebarSearchableOptions

TabsBreakpointType<T>

BarMode枚举说明

AnimationMode12+枚举说明

LayoutStyle10+枚举说明

CommonModifier15+

TabsCacheMode19+枚举说明

TabsNestedScrollMode24+枚举说明

TabBarDisplayMode

TabsSidebarDisplayStyle

事件

[h2]onChange

[h2]onTabBarClick10+

[h2]onAnimationStart11+

[h2]onAnimationEnd11+

[h2]onGestureSwipe11+

[h2]customContentTransition11+

[h2]onContentWillChange12+

[h2]onSelected18+

[h2]onUnselected18+

[h2]onContentDidScroll23+

[h2]onBarDisplayModeChange

TabsOptions¹⁵⁺

[h2]barMode¹⁰⁺

[h2]barMode¹⁰⁺

[h2]barHeight²⁰⁺

[h2]animationCurve²⁰⁺

[h2]animationMode¹²⁺

[h2]barPosition⁹⁺

[h2]divider¹⁰⁺

[h2]fadingEdge¹⁰⁺

[h2]barOverlap¹⁰⁺

[h2]barBackgroundColor¹⁰⁺

[h2]barBackgroundBlurStyle¹¹⁺

[h2]barBackgroundBlurStyle¹⁸⁺

[h2]barGridAlign¹⁰⁺

[h2]edgeEffect¹²⁺

[h2]barBackgroundEffect¹⁸⁺

[h2]pageFlipMode¹⁵⁺

[h2]cachedMaxCount¹⁹⁺

[h2]nestedScroll²⁴⁺

DividerStyle¹⁰⁺对象说明

BarGridColumnOptions¹⁰⁺对象说明

ScrollableBarModeOptions¹⁰⁺对象说明

AnimationMode¹²⁺枚举说明

LayoutStyle¹⁰⁺枚举说明

CommonModifier¹⁵⁺

TabsCacheMode¹⁹⁺枚举说明

TabsNestedScrollMode²⁴⁺枚举说明

[h2]onTabBarClick¹⁰⁺

[h2]onAnimationStart¹¹⁺

[h2]onAnimationEnd¹¹⁺

[h2]onGestureSwipe¹¹⁺

[h2]customContentTransition¹¹⁺

[h2]onContentWillChange¹²⁺

[h2]onSelected¹⁸⁺

[h2]onUnselected¹⁸⁺

[h2]onContentDidScroll²³⁺

OnTabsAnimationStartCallback¹⁸⁺

OnTabsAnimationEndCallback¹⁸⁺

OnTabsGestureSwipeCallback¹⁸⁺

TabsCustomContentTransitionCallback¹⁸⁺

OnTabsContentWillChangeCallback¹⁸⁺

TabsAnimationEvent¹¹⁺对象说明

TabContentAnimatedTransition¹¹⁺

TabContentTransitionProxy¹¹⁺

[h2]finishTransition¹¹⁺

OnTabsContentDidScrollCallback²³⁺

[h2]preloadItems¹²⁺

[h2]setTabBarTranslate¹³⁺

[h2]setTabBarOpacity¹³⁺