1# @ohos.atomicservice.AtomicServiceTabs (Tabs Container)
2
3**AtomicServiceTabs** is an advanced component designed to streamline the use of the **Tabs** component by limiting customization options. It restricts the display to a maximum of five tabs, with fixed styles, positions, and sizes for the tabs.
4
5> **NOTE**
6>
7> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Modules to Import
10
11```
12import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
13```
14
15## Child Components
16
17Not supported
18
19## Attributes
20
21The [universal attributes](ts-universal-attributes-size.md) are not supported.
22
23## AtomicServiceTabs
24
25AtomicServiceTabs ({\
26  tabContents?: [ TabContentBuilder?,
27                    TabContentBuilder?,
28                  TabContentBuilder?,
29                  TabContentBuilder?,
30                  TabContentBuilder?
31                ],\
32  tabBarOptionsArray: [ TabBarOptions,
33                        TabBarOptions,
34                        TabBarOptions?,
35                        TabBarOptions?,
36                        TabBarOptions?
37                      ],\
38  tabBarPosition?: TabBarPosition,\
39  barBackgroundColor?: ResourceColor,\
40  index?: number,\
41  barOverlap?: boolean,\
42  controller?: TabsController,\
43  onChange?: Callback\<number>,\
44  onTabBarClick?: Callback\<number>,\
45  onContentWillChange?: OnContentWillChangeCallback,\
46})
47
48**Decorator**: \@Component
49
50**Atomic service API**: This API can be used in atomic services since API version 12.
51
52**System capability**: SystemCapability.ArkUI.ArkUI.Full
53
54**Parameters**
55
56| Name | Type | Mandatory | Decorator | Description |
57| --------------- | ------ | ---- | ----|----------|
58| tabContents | [[TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder)] | No | @BuilderParam| Array of content view containers.|
59| tabBarOptionsArray | [[TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions)]  | Yes | @Prop | Array of tab bar container configurations. |
60| tabBarPosition | [TabBarPosition](#tabbarposition) | No  |@Prop | Position of the tab bar.|
61| barBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | @Prop | Background color of the tab bar.|
62| index | number | No | @Prop | Index of the currently displayed tab.|
63| barOverlap | boolean| No | @Prop | Whether the tab bar is superimposed on the **TabContent** component after having its background blurred.|
64| controller|[TabsController](ts-container-tabs#tabscontroller) | No | @Prop |Tab controller, which is used to control switching of tabs.|
65| onChange | Callback\<number\> | No | - | Callback invoked when a tab is switched. |
66| onTabBarClick | Callback\<number\> | No | - |Callback invoked when a tab is clicked.|
67| onContentWillChange | [OnContentWillChangeCallback](#oncontentwillchangecallback) | No | - | Callback invoked when a new page is about to be displayed.|
68
69## TabContentBuilder
70
71**Atomic service API**: This API can be used in atomic services since API version 12.
72
73**System capability**: SystemCapability.ArkUI.ArkUI.Full
74
75| Type | Description |
76| ---- | ---------- |
77| () => void | Content view container. |
78
79## TabBarOptions
80
81**Atomic service API**: This API can be used in atomic services since API version 12.
82
83**System capability**: SystemCapability.ArkUI.ArkUI.Full
84
85| Name | Type | Mandatory | Description |
86| --------------- | ------ |------ |------ |
87| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol](#tabbarsymbol12) | Yes | Icon of the tab. |
88| text | [ResourceStr](ts-types.md#resourcestr) | Yes | Text of the tab. |
89| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the tab when it is not selected. |
90| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the tab when it is selected. |
91
92## TabBarPosition 
93
94**Atomic service API**: This API can be used in atomic services since API version 12.
95
96**System capability**: SystemCapability.ArkUI.ArkUI.Full
97
98| Name | Value | Description |
99| --------------- | ------ |-----|
100| LEFT  | 0 | The tab bar is on the left side of the screen. |
101| BOTTOM  | 1 | The tab bar is at the bottom of the screen. |
102
103## OnContentWillChangeCallback
104
105**Atomic service API**: This API can be used in atomic services since API version 12.
106
107**System capability**: SystemCapability.ArkUI.ArkUI.Full
108
109| Name | Type | Mandatory | Description |
110| --------------- | ------ |------ |------ |
111| currentIndex | number | Yes | Index of the current tab. |
112| comingIndex | number | Yes | Index of the tab to be switched to. |
113
114## Example
115
116```ts
117// Index.ets
118import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
119
120@Entry
121@Component
122struct Index {
123  @State message: string = 'Home';
124  @State onClickNumber: number = 0;
125  @State currentIndex: number = 0;
126  @State comingIndex: number = 0;
127  onContentWillChangeCallBack:  OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => {
128    this.currentIndex = currentIndex;
129    this.comingIndex = comingIndex;
130    console.log('OnContentWillChangeCallback')
131     return true;
132  }
133  onTabClick: Callback<number> = (index:number)=>{
134    this.onClickNumber ++;
135    console.log('onTabClick');
136  }
137  @Builder
138  tabContent1() {
139    Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')
140  }
141
142  @Builder
143  tabContent2() {
144    Column().width('100%').height('100%').backgroundColor('#007DFF')
145  }
146
147  @Builder
148  tabContent3() {
149    Column().width('100%').height('100%').backgroundColor('#FFBF00')
150  }
151
152  build() {
153    Stack() {
154    AtomicServiceTabs({
155      tabContents: [
156        () => {
157          this.tabContent1()
158        },
159        () => {
160          this.tabContent2()
161        },
162        () => {
163          this.tabContent3()
164        }
165      ],
166      tabBarOptionsArray: [
167        new TabBarOptions($r('sys.media.ohos_ic_public_phone'), 'Green', Color.Black, Color.Blue),
168        new TabBarOptions($r('sys.media.ohos_ic_public_location'), 'Blue', Color.Black, Color.Blue),
169        new TabBarOptions($r('sys.media.ohos_ic_public_more'), 'Yellow', Color.Black, Color.Blue)
170      ],
171      tabBarPosition: TabBarPosition.BOTTOM,
172      barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),
173      onTabBarClick:this.onTabClick,
174      onContentWillChange: this.onContentWillChangeCallBack,
175    })
176    Column() {
177      Text("onChange callback times:" + this.onClickNumber)
178      Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex)
179    }.margin({top:500})
180    }.height('100%')
181  }
182}
183```
184![atomicservicetabs](figures/atomicservicetabs.gif)
185