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) | 否 | @Prop |Tabs组件的控制器，用于控制Tabs组件进行页签切换。|
66| onChange | Callback\<number\> | 否 | - | Tabs页签切换后触发的事件。 |
67| onTabBarClick | Callback\<number\> | 否 | - |Tabs页签点击后触发的事件。|
68| onContentWillChange | [OnContentWillChangeCallback](#oncontentwillchangecallback) | 否 | - | Tabs页面切换拦截事件能力，新页面即将显示时触发该回调。|
69
70## TabContentBuilder
71
72**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
73
74**系统能力：** SystemCapability.ArkUI.ArkUI.Full
75
76| 类型 | 说明 |
77| ---- | ---------- |
78| () => void | 内容视图容器 |
79
80## TabBarOptions
81
82**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
83
84**系统能力：** SystemCapability.ArkUI.ArkUI.Full
85
86| 名称 | 类型 | 必填 | 说明 |
87| --------------- | ------ |------ |------ |
88| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol](#tabbarsymbol12) | 是 | 页签内的图片内容 |
89| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 |
90| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 未选择时的页签颜色。 |
91| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 被选择时的页签颜色。 |
92
93## TabBarPosition 
94
95**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
96
97**系统能力：** SystemCapability.ArkUI.ArkUI.Full
98
99| 名称 | 值 | 说明 |
100| --------------- | ------ |-----|
101| LEFT  | 0 | 设置TabBar位于屏幕左侧  |
102| BOTTOM  | 1 | 设置TabBar位于屏幕底部 |
103
104## OnContentWillChangeCallback
105
106**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
107
108**系统能力：** SystemCapability.ArkUI.ArkUI.Full
109
110| 名称 | 类型 | 必填 | 说明 |
111| --------------- | ------ |------ |------ |
112| currentIndex | number | 是 | 当前页签索引。 |
113| comingIndex | number | 是 | 即将切换的页签索引。 |
114
115## 示例
116
117```ts
118// Index.ets
119import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
120
121@Entry
122@Component
123struct Index {
124  @State message: string = '首页';
125  @State onClickNumber: number = 0;
126  @State currentIndex: number = 0;
127  @State comingIndex: number = 0;
128  onContentWillChangeCallBack:  OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => {
129    this.currentIndex = currentIndex;
130    this.comingIndex = comingIndex;
131    console.log('OnContentWillChangeCallback')
132     return true;
133  }
134  onTabClick: Callback<number> = (index:number)=>{
135    this.onClickNumber ++;
136    console.log('onTabClick');
137  }
138  @Builder
139  tabContent1() {
140    Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')
141  }
142
143  @Builder
144  tabContent2() {
145    Column().width('100%').height('100%').backgroundColor('#007DFF')
146  }
147
148  @Builder
149  tabContent3() {
150    Column().width('100%').height('100%').backgroundColor('#FFBF00')
151  }
152
153  build() {
154    Stack() {
155    AtomicServiceTabs({
156      tabContents: [
157        () => {
158          this.tabContent1()
159        },
160        () => {
161          this.tabContent2()
162        },
163        () => {
164          this.tabContent3()
165        }
166      ],
167      tabBarOptionsArray: [
168        new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '绿色', Color.Black, Color.Blue),
169        new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue),
170        new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', Color.Black, Color.Blue)
171      ],
172      tabBarPosition: TabBarPosition.BOTTOM,
173      barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),
174      onTabBarClick:this.onTabClick,
175      onContentWillChange: this.onContentWillChangeCallBack,
176    })
177    Column() {
178      Text("onchange回调次数:" + this.onClickNumber)
179      Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex)
180    }.margin({top:500})
181    }.height('100%')
182  }
183}
184```
185![atomicservicetabs](figures/atomicservicetabs.gif)