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-component-general-attributes.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 layoutMode?: LayoutMode, 41 barBackgroundColor?: ResourceColor, 42 index?: number, 43 barOverlap?: boolean, 44 controller?: TabsController, 45 onChange?: Callback<number>, 46 onTabBarClick?: Callback<number>, 47 onContentWillChange?: OnContentWillChangeCallback, 48}) 49``` 50**Decorator**: \@Component 51 52**Atomic service API**: This API can be used in atomic services since API version 12. 53 54**System capability**: SystemCapability.ArkUI.ArkUI.Full 55 56**Parameters** 57 58| Name| Type| Mandatory| Decorator| Description| 59| --------------- | ------ | ---- | ----|----------| 60| tabContents | [[TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder)] | No| @BuilderParam| Array of content view containers.| 61| tabBarOptionsArray | [[TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions)] | Yes| @Prop | Array of tab bar container configurations.| 62| tabBarPosition | [TabBarPosition](#tabbarposition) | No |@Prop | Position of the tab bar.| 63| layoutMode<sup>16+</sup> | [LayoutMode](ts-container-tabcontent.md#layoutmode10) | No |@Prop | Sets the layout mode of the images and texts on the bottom tab.| 64| barBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| @Prop | Background color of the tab bar.| 65| index | number | No| @Prop | Index of the currently displayed tab.| 66| barOverlap | boolean| No| @Prop | Whether the tab bar is superimposed on the **TabContent** component after having its background blurred.| 67| controller|[TabsController](ts-container-tabs.md#tabscontroller) | No| - |Tab controller, which is used to control switching of tabs.| 68| onChange | Callback\<number\> | No| - | Callback invoked when a tab is switched.| 69| onTabBarClick | Callback\<number\> | No| - |Callback invoked when a tab is clicked.| 70| onContentWillChange | [OnContentWillChangeCallback](#oncontentwillchangecallback) | No| - | Callback invoked when a new page is about to be displayed.| 71 72## TabContentBuilder 73 74type TabContentBuilder = () => void 75 76**Atomic service API**: This API can be used in atomic services since API version 12. 77 78**System capability**: SystemCapability.ArkUI.ArkUI.Full 79 80| Type| Description| 81| ---- | ---------- | 82| () => void | Content view container.| 83 84## TabBarOptions 85 86### constructor 87constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr, unselectedColor?: ResourceColor, selectedColor?: ResourceColor) 88 89A constructor used to create an **TabBarOptions** instance. 90 91**Atomic service API**: This API can be used in atomic services since API version 12. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95**Parameters** 96 97| Name| Type| Mandatory| Description| 98| --------------- | ------ |------ |------ | 99| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol](ts-container-tabcontent.md#tabbarsymbol12) | Yes| Icon of the tab.| 100| text | [ResourceStr](ts-types.md#resourcestr) | Yes| Text of the tab.| 101| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the tab when it is not selected.<br>Default value: **#99182431**| 102| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the tab when it is selected.<br>Default value: **#FF007DFF**| 103 104## TabBarPosition 105 106**Atomic service API**: This API can be used in atomic services since API version 12. 107 108**System capability**: SystemCapability.ArkUI.ArkUI.Full 109 110| Name| Value| Description| 111| --------------- | ------ |-----| 112| LEFT | 0 | The tab bar is on the left side of the screen. | 113| BOTTOM | 1 | The tab bar is at the bottom of the screen.| 114 115## OnContentWillChangeCallback 116 117type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean 118 119**Atomic service API**: This API can be used in atomic services since API version 12. 120 121**System capability**: SystemCapability.ArkUI.ArkUI.Full 122 123| Name| Type| Mandatory| Description| 124| --------------- | ------ |------ |------ | 125| currentIndex | number | Yes| Index of the current tab.| 126| comingIndex | number | Yes| Index of the tab to be switched to.| 127 128## Example 129 130### Example 1: Pure Text Style 131 132```ts 133// Index.ets 134import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; 135 136@Entry 137@Component 138struct Index { 139 @State message: string = 'Home'; 140 @State onClickNumber: number = 0; 141 @State currentIndex: number = 0; 142 @State comingIndex: number = 0; 143 onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => { 144 this.currentIndex = currentIndex; 145 this.comingIndex = comingIndex; 146 console.log('OnContentWillChangeCallback') 147 return true; 148 } 149 onTabClick: Callback<number> = (index:number)=>{ 150 this.onClickNumber ++; 151 console.log('onTabClick'); 152 } 153 @Builder 154 tabContent1() { 155 Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87') 156 } 157 158 @Builder 159 tabContent2() { 160 Column().width('100%').height('100%').backgroundColor('#007DFF') 161 } 162 163 @Builder 164 tabContent3() { 165 Column().width('100%').height('100%').backgroundColor('#FFBF00') 166 } 167 168 build() { 169 Stack() { 170 AtomicServiceTabs({ 171 tabContents: [ 172 () => { 173 this.tabContent1() 174 }, 175 () => { 176 this.tabContent2() 177 }, 178 () => { 179 this.tabContent3() 180 } 181 ], 182 tabBarOptionsArray: [ 183 new TabBarOptions('', 'Green', Color.Black, Color.Green), 184 new TabBarOptions('', 'Blue', Color.Black, Color.Blue), 185 new TabBarOptions('', 'Yellow', Color.Black, Color.Yellow), 186 ], 187 tabBarPosition: TabBarPosition.BOTTOM, 188 barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), 189 onTabBarClick:this.onTabClick, 190 onContentWillChange: this.onContentWillChangeCallBack, 191 }) 192 Column() { 193 Text("onchange callback times:" + this.onClickNumber) 194 Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex) 195 }.margin({top:500}) 196 }.height('100%') 197 } 198} 199``` 200 201 202### Example 2: Pure Icon Style 203 204```ts 205// Index.ets 206import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; 207 208@Entry 209@Component 210struct Index { 211 @State message: string = 'Home'; 212 @State onClickNumber: number = 0; 213 @State currentIndex: number = 0; 214 @State comingIndex: number = 0; 215 onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => { 216 this.currentIndex = currentIndex; 217 this.comingIndex = comingIndex; 218 console.log('OnContentWillChangeCallback') 219 return true; 220 } 221 onTabClick: Callback<number> = (index:number)=>{ 222 this.onClickNumber ++; 223 console.log('onTabClick'); 224 } 225 @Builder 226 tabContent1() { 227 Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87') 228 } 229 230 @Builder 231 tabContent2() { 232 Column().width('100%').height('100%').backgroundColor('#007DFF') 233 } 234 235 @Builder 236 tabContent3() { 237 Column().width('100%').height('100%').backgroundColor('#FFBF00') 238 } 239 240 build() { 241 Stack() { 242 AtomicServiceTabs({ 243 tabContents: [ 244 () => { 245 this.tabContent1() 246 }, 247 () => { 248 this.tabContent2() 249 }, 250 () => { 251 this.tabContent3() 252 } 253 ], 254 tabBarOptionsArray: [ 255 new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '', Color.Black, Color.Blue), 256 new TabBarOptions($r('sys.media.ohos_ic_public_location'), '', Color.Black, Color.Blue), 257 new TabBarOptions($r('sys.media.ohos_ic_public_more'), '', Color.Black, Color.Blue), 258 ], 259 tabBarPosition: TabBarPosition.BOTTOM, 260 barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), 261 onTabBarClick:this.onTabClick, 262 onContentWillChange: this.onContentWillChangeCallBack, 263 }) 264 Column() { 265 Text("onchange callback times:" + this.onClickNumber) 266 Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex) 267 }.margin({top:500}) 268 }.height('100%') 269 } 270} 271``` 272 273 274 275### Example 3: Custom Layout with Text and Icons 276 277```ts 278// Index.ets 279import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; 280 281@Entry 282@Component 283struct AtomicserviceTabs { 284 @State flag: boolean = false; 285 @State message: string = 'Home'; 286 @State onClickNumber: number = 0; 287 @State currentIndex: number = 0; 288 @State comingIndex: number = 0; 289 @State layoutMode: LayoutMode = LayoutMode.VERTICAL; 290 onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => { 291 this.currentIndex = currentIndex; 292 this.comingIndex = comingIndex; 293 console.log('OnContentWillChangeCallback') 294 return true; 295 } 296 onTabClick: Callback<number> = (index: number) => { 297 this.onClickNumber++; 298 console.log('onTabClick'); 299 } 300 onChange: Callback<number, void> = (Index: number) => { 301 console.log('onChange'); 302 console.log('onChange2'); 303 } 304 305 @Builder 306 tabContent1() { 307 Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87') 308 } 309 310 @Builder 311 tabContent2() { 312 Column().width('100%').height('100%').backgroundColor(Color.Blue) 313 } 314 315 @Builder 316 tabContent3() { 317 Column().width('100%').height('100%').backgroundColor('#FFBF00') 318 } 319 320 build() { 321 Stack() { 322 AtomicServiceTabs({ 323 tabContents: [ 324 () => { 325 this.tabContent1() 326 }, 327 () => { 328 this.tabContent2() 329 }, 330 () => { 331 this.tabContent3() 332 }, 333 ], 334 tabBarOptionsArray: [ 335 new TabBarOptions($r('sys.media.ohos_ic_public_phone'), 'Green', Color.Black, Color.Blue), 336 new TabBarOptions($r('sys.media.ohos_ic_public_location'), 'Blue', Color.Black, Color.Blue), 337 new TabBarOptions($r('sys.media.ohos_ic_public_more'), 'Yellow', Color.Black, Color.Blue), 338 ], 339 tabBarPosition: TabBarPosition.BOTTOM, 340 barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), 341 onTabBarClick: this.onTabClick, 342 onContentWillChange: this.onContentWillChangeCallBack, 343 onChange: this.onChange, 344 layoutMode: this.layoutMode, 345 }) 346 347 Column() { 348 Button("Vertical Layout") 349 .width('30%') 350 .height(50) 351 .margin({ top: 5 }) 352 .onClick((event?: ClickEvent) => { 353 this.layoutMode = LayoutMode.VERTICAL; 354 }) 355 Button("Horizontal Layout") 356 .width('30%') 357 .height(50) 358 .margin({ top: 5 }) 359 .onClick((event?: ClickEvent) => { 360 this.layoutMode = LayoutMode.HORIZONTAL; 361 }) 362 }.margin({ top: 10 }) 363 }.height('100%') 364 } 365} 366``` 367 368
