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