• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# TabContent
2
3The **\<TabContent>** component is used only in the **\<Tabs>** component. It corresponds to the content view of a switched tab page.
4
5>  **NOTE**
6>
7>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12This component supports only one child component.
13
14>  **NOTE**
15>
16>  Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
17
18
19## APIs
20
21TabContent()
22
23
24## Attributes
25
26In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
27
28| Name| Type| Description|
29| -------- | -------- | -------- |
30| tabBar | string \| [Resource](ts-types.md#resource) \| {<br>icon?: string \| [Resource](ts-types.md#resource),<br>text?: string \| [Resource](ts-types.md#resource)<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.<br>If the content set exceeds the space provided by the tab bar, it will be clipped.|
31| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
32
33>  **NOTE**
34>
35>  - The **\<TabContent>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **\<Tabs>** component.
36>  - The **\<TabContent>** component does not support setting of the common height attribute. Its height is determined by the height of the parent **\<Tabs>** component and the **\<TabBar>** component.
37>  - If the **vertical** attribute is **false**, the width and height descriptions are swapped in the preceding two restrictions.
38>  - **\<TabContent>** does not support page scrolling. If page scrolling is required, consider nesting a list.
39
40## SubTabBarStyle<sup>9+</sup>
41
42Implements the subtab style.
43
44### constructor<sup>9+</sup>
45
46constructor(content: string | Resource)
47
48Constructor used to create a **SubTabBarStyle** instance.
49
50**Parameters**
51
52| Name| Type        | Mandatory| Description|
53| -------- | -------- | -------- | -------- |
54| content | string \| [Resource](ts-types.md#resource) | Yes| Text for the tab. Since API version 10, the type of **content** is **ResourceStr**.|
55
56
57## BottomTabBarStyle<sup>9+</sup>
58
59Implements the bottom and side tab style.
60
61### constructor<sup>9+</sup>
62
63constructor(icon: string | Resource, text: string | Resource)
64
65A constructor used to create a **BottomTabBarStyle** instance.
66
67**Parameters**
68
69| Name| Type        | Mandatory| Description|
70| -------- | -------- | -------- | -------- |
71| icon | string \| [Resource](ts-types.md#resource) | Yes| Image for the tab. Since API version 10, the type of **icon** is **ResourceStr**.|
72| text | string \| [Resource](ts-types.md#resource) | Yes| Text for the tab. Since API version 10, the type of **text** is **ResourceStr**.|
73
74
75## Example
76
77Example 1:
78
79```ts
80// xxx.ets
81@Entry
82@Component
83struct TabContentExample {
84  @State fontColor: string = '#182431'
85  @State selectedFontColor: string = '#007DFF'
86  @State currentIndex: number = 0
87  private controller: TabsController = new TabsController()
88
89  @Builder TabBuilder(index: number) {
90    Column() {
91      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
92        .width(24)
93        .height(24)
94        .margin({ bottom: 4 })
95        .objectFit(ImageFit.Contain)
96      Text(`Tab${index + 1}`)
97        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
98        .fontSize(10)
99        .fontWeight(500)
100        .lineHeight(14)
101    }.width('100%')
102  }
103
104  build() {
105    Column() {
106      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
107        TabContent() {
108          Column() {
109            Text('Tab1')
110              .fontSize(36)
111              .fontColor('#182431')
112              .fontWeight(500)
113              .opacity(0.4)
114              .margin({ top: 30, bottom: 56.5 })
115            Divider()
116              .strokeWidth(0.5)
117              .color('#182431')
118              .opacity(0.05)
119          }.width('100%')
120        }.tabBar(this.TabBuilder(0))
121
122        TabContent() {
123          Column() {
124            Text('Tab2')
125              .fontSize(36)
126              .fontColor('#182431')
127              .fontWeight(500)
128              .opacity(0.4)
129              .margin({ top: 30, bottom: 56.5 })
130            Divider()
131              .strokeWidth(0.5)
132              .color('#182431')
133              .opacity(0.05)
134          }.width('100%')
135        }.tabBar(this.TabBuilder(1))
136
137        TabContent() {
138          Column() {
139            Text('Tab3')
140              .fontSize(36)
141              .fontColor('#182431')
142              .fontWeight(500)
143              .opacity(0.4)
144              .margin({ top: 30, bottom: 56.5 })
145            Divider()
146              .strokeWidth(0.5)
147              .color('#182431')
148              .opacity(0.05)
149          }.width('100%')
150        }.tabBar(this.TabBuilder(2))
151
152        TabContent() {
153          Column() {
154            Text('Tab4')
155              .fontSize(36)
156              .fontColor('#182431')
157              .fontWeight(500)
158              .opacity(0.4)
159              .margin({ top: 30, bottom: 56.5 })
160            Divider()
161              .strokeWidth(0.5)
162              .color('#182431')
163              .opacity(0.05)
164          }.width('100%')
165        }.tabBar(this.TabBuilder(3))
166      }
167      .vertical(false)
168      .barHeight(56)
169      .onChange((index: number) => {
170        this.currentIndex = index
171      })
172      .width(360)
173      .height(190)
174      .backgroundColor('#F1F3F5')
175      .margin({ top: 38 })
176    }.width('100%')
177  }
178}
179```
180
181![tabContent](figures/tabContent1.gif)
182
183Example 2:
184
185```ts
186// xxx.ets
187@Entry
188@Component
189struct TabContentExample {
190  @State fontColor: string = '#182431'
191  @State selectedFontColor: string = '#007DFF'
192  @State currentIndex: number = 0
193  private controller: TabsController = new TabsController()
194
195  @Builder TabBuilder(index: number) {
196    Column() {
197      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
198        .width(24)
199        .height(24)
200        .margin({ bottom: 4 })
201        .objectFit(ImageFit.Contain)
202      Text('Tab')
203        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
204        .fontSize(10)
205        .fontWeight(500)
206        .lineHeight(14)
207    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
208  }
209
210  build() {
211    Column() {
212      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
213        TabContent()
214          .tabBar(this.TabBuilder(0))
215        TabContent()
216          .tabBar(this.TabBuilder(1))
217        TabContent()
218          .tabBar(this.TabBuilder(2))
219        TabContent()
220          .tabBar(this.TabBuilder(3))
221      }
222      .vertical(true)
223      .barWidth(96)
224      .barHeight(414)
225      .onChange((index: number) => {
226        this.currentIndex = index
227      })
228      .width(96)
229      .height(414)
230      .backgroundColor('#F1F3F5')
231      .margin({ top: 52 })
232    }.width('100%')
233  }
234}
235```
236
237![tabContent](figures/tabContent2.gif)
238
239Example 3:
240
241```ts
242// xxx.ets
243@Entry
244@Component
245struct TabBarStyleExample {
246  build() {
247    Column({ space: 5 }) {
248      Text ("Subtab Style")
249      Column() {
250        Tabs({ barPosition: BarPosition.Start }) {
251          TabContent() {
252            Column().width('100%').height('100%').backgroundColor(Color.Pink)
253          }.tabBar(new SubTabBarStyle('Pink'))
254
255          TabContent() {
256            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
257          }.tabBar(new SubTabBarStyle('Yellow'))
258
259          TabContent() {
260            Column().width('100%').height('100%').backgroundColor(Color.Blue)
261          }.tabBar(new SubTabBarStyle('Blue'))
262
263          TabContent() {
264            Column().width('100%').height('100%').backgroundColor(Color.Green)
265          }.tabBar(new SubTabBarStyle('Green'))
266        }
267        .vertical(false)
268        .scrollable(true)
269        .barMode(BarMode.Fixed)
270        .onChange((index: number) => {
271          console.info(index.toString())
272        })
273        .width('100%')
274        .backgroundColor(0xF1F3F5)
275      }.width('100%').height(200)
276      Text ("Bottom Tab Style")
277      Column() {
278        Tabs({ barPosition: BarPosition.End }) {
279          TabContent() {
280            Column().width('100%').height('100%').backgroundColor(Color.Pink)
281          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
282
283          TabContent() {
284            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
285          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
286
287          TabContent() {
288            Column().width('100%').height('100%').backgroundColor(Color.Blue)
289          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
290
291          TabContent() {
292            Column().width('100%').height('100%').backgroundColor(Color.Green)
293          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
294        }
295        .vertical(false)
296        .scrollable(true)
297        .barMode(BarMode.Fixed)
298        .onChange((index: number) => {
299          console.info(index.toString())
300        })
301        .width('100%')
302        .backgroundColor(0xF1F3F5)
303      }.width('100%').height(200)
304      Text ("Side Tab Style")
305      Column() {
306        Tabs({ barPosition: BarPosition.Start }) {
307          TabContent() {
308            Column().width('100%').height('100%').backgroundColor(Color.Pink)
309          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
310
311          TabContent() {
312            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
313          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
314
315          TabContent() {
316            Column().width('100%').height('100%').backgroundColor(Color.Blue)
317          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
318
319          TabContent() {
320            Column().width('100%').height('100%').backgroundColor(Color.Green)
321          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
322        }
323        .vertical(true).scrollable(true).barMode(BarMode.Fixed)
324        .onChange((index: number) => {
325          console.info(index.toString())
326        })
327        .width('100%')
328        .backgroundColor(0xF1F3F5)
329      }.width('100%').height(400)
330    }
331  }
332}
333```
334
335![tabbarStyle](figures/TabBarStyle.jpeg)
336