1# AtomicServiceTabs
2
3AtomicServiceTabs高级组件，对Tabs组件一些不需提供给用户自定义设计的属性进行简化，限制最多显示5个页签，固定页签样式，位置和大小。
4
5> **说明：**
6>
7> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 导入模块
10
11```
12import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
13```
14
15## 子组件
16
17无
18
19## 属性
20
21不支持[通用属性](ts-universal-attributes-size.md)
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**装饰器类型：**\@Component
50
51**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
52
53**系统能力：** SystemCapability.ArkUI.ArkUI.Full
54
55**参数：**
56
57| 名称 | 类型 | 必填 | 装饰器类型 | 说明 |
58| --------------- | ------ | ---- | ----|----------|
59| tabContents | [[TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder)] | 否 | @BuilderParam| 内容视图容器数组。|
60| tabBarOptionsArray | [[TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions)]  | 是 | @Prop | 页签容器数组。 |
61| tabBarPosition | [TabBarPosition](#tabbarposition) | 否   |@Prop | 设置页签栏位置。|
62| barBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | @Prop | 设置TabBar的背景颜色。|
63| index | number | 否 | @Prop | 设置当前显示页签的索引。|
64| barOverlap | boolean| 否 | @Prop | 设置TabBar是否背后变模糊并叠加在TabContent之上。|
65| controller|[TabsController](ts-container-tabs#tabscontroller) | 否 | - |Tabs组件的控制器，用于控制Tabs组件进行页签切换。|
66| onChange | Callback\<number\> | 否 | - | Tabs页签切换后触发的事件。 |
67| onTabBarClick | Callback\<number\> | 否 | - |Tabs页签点击后触发的事件。|
68| onContentWillChange | [OnContentWillChangeCallback](#oncontentwillchangecallback) | 否 | - | Tabs页面切换拦截事件能力，新页面即将显示时触发该回调。|
69
70## TabContentBuilder
71
72type TabContentBuilder = () => void
73
74**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
75
76**系统能力：** SystemCapability.ArkUI.ArkUI.Full
77
78| 类型 | 说明 |
79| ---- | ---------- |
80| () => void | 内容视图容器 |
81
82## TabBarOptions
83
84初始化页签的构造函数，包括icon，text，unselectColor和SelectedColor。
85
86### constructor
87
88constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr, unselectedColor?: ResourceColor, selectedColor?: ResourceColor);
89
90**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
91
92**系统能力：** SystemCapability.ArkUI.ArkUI.Full
93
94| 名称 | 类型 | 必填 | 说明 |
95| --------------- | ------ |------ |------ |
96| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol](#tabbarsymbol12) | 是 | 页签内的图片内容 |
97| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 |
98| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 未选择时的页签颜色。 |
99| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 被选择时的页签颜色。 |
100
101## TabBarPosition
102
103**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
104
105**系统能力：** SystemCapability.ArkUI.ArkUI.Full
106
107| 名称 | 值 | 说明 |
108| --------------- | ------ |-----|
109| LEFT  | 0 | 设置TabBar位于屏幕左侧  |
110| BOTTOM  | 1 | 设置TabBar位于屏幕底部 |
111
112## OnContentWillChangeCallback
113
114type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean
115
116**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
117
118**系统能力：** SystemCapability.ArkUI.ArkUI.Full
119
120| 名称 | 类型 | 必填 | 说明 |
121| --------------- | ------ |------ |------ |
122| currentIndex | number | 是 | 当前页签索引。 |
123| comingIndex | number | 是 | 即将切换的页签索引。 |
124
125## 示例
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 = '首页';
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'), '绿色', Color.Black, Color.Blue),
179        new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue),
180        new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', 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回调次数:" + 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)