• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# <tabs> Development
2
3
4The **<tabs>** component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md).
5
6
7## Creating Tabs
8
9Create a **<tabs>** component in the .hml file under **pages/index**.
10
11```html
12<!-- xxx.hml -->
13<div class="container">
14    <tabs>
15        <tab-bar>
16            <text>item1</text>
17            <text>item2</text>
18        </tab-bar>
19        <tab-content class="tabContent">
20            <div class="text">
21                <text>content1</text>
22            </div>
23            <div class="text">
24                <text>content2</text>
25            </div>
26        </tab-content>
27    </tabs>
28</div>
29```
30
31```css
32/* xxx.css */
33.container {
34  flex-direction: column;
35  justify-content: center;
36  align-items: center;
37  background-color: #F1F3F5;
38}
39.tabContent{
40  width: 100%;
41  height: 100%;
42}
43.text{
44  width: 100%;
45  height: 100%;
46  justify-content: center;
47  align-items: center;
48}
49```
50
51![en-us_image_0000001223287676](figures/en-us_image_0000001223287676.gif)
52
53
54## Setting Styles
55
56Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
57```html
58<!-- xxx.hml -->
59<div class="container">
60  <tabs class="tabs">
61    <tab-bar class="tabBar">
62      <text class="tabBarItem">item1</text>
63      <text class="tabBarItem">item2</text>
64    </tab-bar>
65    <tab-content class="tabContent">
66      <div class="tabContent">
67        <text>content1</text>
68      </div>
69      <div class="tabContent" >
70        <text>content2</text>
71      </div>
72    </tab-content>
73  </tabs>
74</div>
75```
76
77```css
78/* xxx.css */
79.container {
80  flex-direction: column;
81  justify-content: flex-start;
82  align-items: center;
83 background-color:#F1F3F5;
84}
85.tabs{
86  margin-top: 20px;
87 border: 1px solid #2262ef;
88  width: 99%;
89  padding: 10px;
90}
91.tabBar{
92  width: 100%;
93  border: 1px solid #78abec;
94}
95.tabContent{
96  width: 100%;
97  margin-top: 10px;
98  height: 300px;
99  color: blue;
100  justify-content: center;
101  align-items: center;
102}
103```
104
105![en-us_image_0000001267767857](figures/en-us_image_0000001267767857.gif)
106
107
108## Displaying the Tab Index
109
110Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching.
111
112```html
113<!-- xxx.hml -->
114<div class="container" style="background-color:#F1F3F5;">
115  <tabs class="tabs" onchange="tabChange">
116    <tab-bar class="tabBar">
117      <text class="tabBarItem">item1</text>
118      <text class="tabBarItem">item2</text>
119    </tab-bar>
120    <tab-content class="tabContent">
121      <div>
122        <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
123      </div>
124      <div>
125        <image src="common/images/img1.jpg" style="object-fit: contain;"> </image>
126      </div>
127    </tab-content>
128  </tabs>
129</div>
130```
131
132```js
133// xxx.js
134import promptAction from '@ohos.promptAction';
135export default {
136  tabChange(e){
137    promptAction.showToast({
138      message: "Tab index: " + e.index
139    })
140  }
141}
142```
143
144![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
145
146
147> **NOTE**
148>
149> A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md)  and at most one [**&lt;tab-content&gt;**](../reference/arkui-js/js-components-container-tab-content.md).
150
151
152## Example Scenario
153
154In this example, you can switch between tabs and the active tab has the title text in red with an underline below.
155
156Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
157
158```html
159<!-- xxx.hml -->
160<div class="container">
161  <tabs onchange="changeTabactive">
162    <tab-content>
163      <div class="item-container" for="datas.list">
164        <div if="{{$item.title=='List1'?true:false}}">
165          <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image>
166        </div>
167        <div if="{{$item.title=='List2'?true:false}}">
168          <image src="common/images/img1.jpg" style="object-fit: none;"> </image>
169        </div>
170        <div if="{{$item.title=='List3'?true:false}}">
171          <image src="common/images/img2.jpg" style="object-fit: contain;"> </image>
172        </div>
173      </div>
174    </tab-content>
175    <tab-bar class="tab_bar mytabs" mode="scrollable">
176      <div class="tab_item" for="datas.list">
177        <text style="color: {{$item.color}};">{{$item.title}}</text>
178        <div class="underline-show" if="{{$item.show}}"></div>
179        <div class="underline-hide" if="{{!$item.show}}"></div>
180      </div>
181    </tab-bar>
182  </tabs>
183</div>
184```
185
186```css
187/* xxx.css */
188.container{
189width: 100%;
190height: 100%;
191background-color:#F1F3F5;
192}
193.tab_bar {
194  width: 100%;
195  height: 150px;
196}
197.tab_item {
198  height: 30%;
199  flex-direction: column;
200  align-items: center;
201}
202.tab_item text {
203  font-size: 32px;
204}
205.item-container {
206  justify-content: center;
207  flex-direction: column;
208}
209.underline-show {
210  height: 2px;
211  width: 160px;
212  background-color: #FF4500;
213  margin-top: 7.5px;
214}
215.underline-hide {
216  height: 2px;
217  margin-top: 7.5px;
218  width: 160px;
219}
220```
221
222```js
223// xxx.js
224import promptAction from '@ohos.promptAction';
225export default {
226  data() {
227    return {
228      datas: {
229        color_normal: '#878787',
230        color_active: '#ff4500',
231        show: true,
232        list: [{
233          i: 0,
234          color: '#ff4500',
235          show: true,
236          title: 'List1'
237        }, {
238          i: 1,
239          color: '#878787',
240          show: false,
241          title: 'List2'
242        }, {
243           i: 2,
244           color: '#878787',
245           show: false,
246           title: 'List3'
247        }]
248      }
249    }
250  },
251  changeTabactive (e) {
252    for (let i = 0; i < this.datas.list.length; i++) {
253      let element = this.datas.list[i];
254      element.show = false;
255      element.color = this.datas.color_normal;
256      if (i === e.index) {
257        element.show = true;
258        element.color = this.datas.color_active;
259      }
260    }
261  }
262}
263```
264
265![en-us_image_tab.gif](figures/en-us_image_tab.gif)