• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \<stepper> Development
2
3When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
4
5
6> **NOTE**
7>
8> This component is supported since API version 5.
9
10
11## Creating a \<stepper> Component
12
13Create a **\<stepper>** component in the .hml file under **pages/index**.
14
15```html
16<!-- xxx.hml -->
17<div class="container">
18 <stepper>
19   <stepper-item>
20     <text>Step 1</text>
21   </stepper-item>
22   <stepper-item>
23     <text>Step 2</text>
24   </stepper-item>
25 </stepper>
26</div>
27```
28
29```css
30/* xxx.css */
31.container {
32  width:100%;
33  height:100%;
34  flex-direction: column;
35  justify-content: center;
36  align-items: center;
37  background-color: #F1F3F5;
38}
39text{
40  width: 100%;
41  height: 100%;
42  text-align: center;
43}
44```
45
46![en-us_image_0000001234289455](figures/en-us_image_0000001234289455.gif)
47
48
49## Setting the Index
50
51Set **index** to the index value of the step that you want to display by default.
52
53```html
54<!-- xxx.hml -->
55<div class="container">
56 <stepper index="2">
57   <stepper-item>
58     <text>stepper-item1</text>
59   </stepper-item>
60   <stepper-item>
61     <text>stepper-item2</text>
62   </stepper-item>
63   <stepper-item>
64     <text>stepper-item3</text>
65   </stepper-item>
66  </stepper>
67</div>
68```
69
70```css
71/* xxx.css */
72.container {
73  width:100%;
74  height:100%;
75  flex-direction: column;
76  background-color: #F1F3F5;
77}
78text{
79  width: 100%;
80  height: 100%;
81  text-align: center;
82}
83```
84
85![en-us_image_0000001234011019](figures/en-us_image_0000001234011019.gif)
86
87Set the **label** attribute to customize the label for the **\<stepper-item>**.
88
89```html
90<!-- xxx.hml -->
91<div class="container">
92 <stepper index="1">
93   <stepper-item label="{{label_1}}">
94     <text>stepper-item1</text>
95   </stepper-item>
96   <stepper-item label="{{label_2}}">
97     <text>stepper-item2</text>
98   </stepper-item>
99   <stepper-item label="{{label_3}}">
100     <text>stepper-item3</text>
101   </stepper-item>
102   <stepper-item>
103     <text>stepper-item4</text>
104   </stepper-item>
105 </stepper>
106</div>
107```
108
109```css
110/* xxx.css */
111.container {
112  width:100%;
113  height:100%;
114  flex-direction: column;
115  background-color: #F1F3F5;
116}
117text{
118  width: 100%;
119  height: 100%;
120  text-align: center;
121}
122```
123
124```js
125// xxx.js
126export default {
127  data: {
128    label_1:{
129      nextLabel: 'NEXT',
130      status: 'normal'
131    },
132    label_2:{
133      prevLabel: 'BACK',
134      nextLabel: 'NEXT',
135      status: 'normal'
136    },
137    label_3:{
138      prevLabel: 'BACK',
139      nextLabel: 'END',
140      status: 'disabled'
141    },
142  },
143}
144```
145
146![en-us_image_0000001163531210](figures/en-us_image_0000001163531210.gif)
147
148
149## Setting Styles
150
151By default, the **\<stepper>** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
152```html
153<!-- xxx.hml -->
154<div class="container" >
155  <div class="stepperContent">
156    <stepper class="stepperClass">
157      <stepper-item>
158        <text>stepper-item1</text>
159      </stepper-item>
160    </stepper>
161  </div>
162</div>
163```
164
165```css
166/* xxx.css */
167.container {
168  width:100%;
169  height:100%;
170  flex-direction: column;
171  align-items: center;
172  justify-content: center;
173  background-color:#F1F3F5;
174}
175.stepperContent{
176  width: 300px;
177  height: 300px;
178}
179.stepperClass{
180  border:1px solid silver ;
181  background-color: white;
182}
183text{
184  width: 100%;
185  height: 100%;
186  text-align: center;
187}
188```
189
190![en-us_image_0000001234130975](figures/en-us_image_0000001234130975.png)
191
192
193## Adding Events
194
195The **\<stepper>** component supports the **finish**, **change**, **next**, **back**, and **skip** events.
196
197- When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event.
198
199- Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected.
200
201```html
202<!-- xxx.hml -->
203<div class="container"  style="background-color:#F1F3F5;">
204  <div >
205    <stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}">
206      <stepper-item>
207        <text>stepper-item1</text>
208        <button value="skip" onclick="skipClick"></button>
209      </stepper-item>
210      <stepper-item>
211         <text>stepper-item2</text>
212         <button value="skip" onclick="skipClick"></button>
213      </stepper-item>
214      <stepper-item>
215        <text>stepper-item3</text>
216      </stepper-item>
217    </stepper>
218  </div>
219</div>
220```
221
222```css
223/* xxx.css */
224.doc-page {
225  width:100%;
226  height:100%;
227  flex-direction: column;
228  align-items: center;
229  justify-content: center;
230}
231stepper-item{
232  width: 100%;
233  flex-direction: column;
234  align-self: center;
235  justify-content: center;
236}
237text{
238  margin-top: 45%;
239  justify-content: center;
240  align-self: center;
241  margin-bottom: 50px;
242}
243button{
244  width: 80%;
245  height: 60px;
246  margin-top: 20px;
247}
248```
249
250```js
251// xxx.js
252import promptAction from '@ohos.promptAction';
253export default {
254  data: {
255    index:0,
256  },
257   stepperSkip(){
258    this.index = null;
259    this.index=2;
260  },
261   skipClick(){
262    this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
263  },
264  stepperFinish(){
265    promptAction.showToast({
266      message: 'All Finished'
267    })
268  },
269  stepperChange(e){
270    console.log("stepperChange"+e.index)
271    promptAction.showToast({
272      // index indicates the sequence number of the current step.
273      message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
274    })
275  },
276  stepperNext(e){
277    console.log("stepperNext"+e.index)
278    promptAction.showToast({
279      // pendingIndex indicates the sequence number of the step to be redirected to.
280      message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
281    })
282    var index = {pendingIndex:e.pendingIndex }
283    return index;
284  },
285  stepperBack(e){
286    console.log("stepperBack"+e.index)
287    var index = {pendingIndex: e.pendingIndex }
288    return index;
289  }
290}
291```
292
293![en-us_image_0000001189089950](figures/en-us_image_0000001189089950.gif)
294
295
296## Example Scenario
297
298In this example, you can select the options displayed on the page and see how your selection takes effect in real time. Clicking the next button will dynamically change the font color and font size of the selected option.
299
300Use a **\<stepper>** component to navigate through the steps. Create a **\<Toggle>**(../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selecting an option and displaying the selection result. Then use the **\<Select>**(../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected option.
301
302```html
303<!-- xxx.hml -->
304<div class="container">
305  <stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;">
306    <stepper-item label="{{label1}}">
307      <div style="flex-direction: column;padding: 0px 10px;">
308        <text class="text" style="margin-top: 10%;text-align: center;width: 100%;">Select error types:</text>
309        <text style="margin-top: 20px;padding: 10px">
310          <span>{{error}}</span>
311        </text>
312        <div style="justify-content: space-around;flex-wrap: wrap;">
313          <toggle for="{{togglelist1}}" value="{{$item}}" class="tog" onchange="multiTog({{$item}})"></toggle>
314        </div>
315      </div>
316    </stepper-item>
317    <stepper-item label="{{label2}}">
318      <div style="flex-direction: column;align-items: center;">
319        <text class="txt" style="margin-top: 10%;">Toggle</text>
320        <div style="justify-content: space-around;flex-wrap: wrap;;margin-top:10%">
321          <toggle class="tog" for="{{togglelist1}}" value="{{$item}}" style="text-color: {{tcolor}};font-size: {{tsize}}; font-style: {{tstyle}};font-weight: {{tweight}};font-family: {{tfamily}};">
322          </toggle>
323        </div>
324        <div style="flex-wrap: wrap;width: 700px;margin-top:10%">
325          <div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
326            <text class="txt">text-color</text>
327            <select onchange="settcolor">
328              <option for="{{color_list}}" value="{{$item}}">{{$item}}</option>
329            </select>
330          </div>
331          <div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
332            <text class="txt">font-size</text>
333            <select onchange="settsize">
334              <option for="{{size_list}}" value="{{$item}}">{{$item}}</option>
335            </select>
336          </div>
337        </div>
338      </div>
339    </stepper-item>
340  </stepper>
341</div>
342```
343
344```css
345/* xxx.css */
346.container {
347  width:100%;
348  height:100%;
349  flex-direction: column;
350  align-items: center;
351  justify-content: center;
352  background-color:#F1F3F5;
353}
354.dvd {
355  stroke-width: 8px;
356  color: orangered;
357  margin: 65px;
358}
359.tog{
360  margin-right: 20px;
361  margin-top: 30px;
362}
363```
364
365```js
366// xxx.js
367let myset = new Set();
368export default {
369  data: {
370    error: '',
371    tcolor:'#FF4500',
372    color_list:['#FF4500','#5F9EA0','#0000FF'],
373    tsize: '12px',
374    size_list: ['12px', '30px', '8px', '50px'],
375    label1: {
376      prevLabel: 'The text on the left of the starting step is invalid.',
377      nextLabel: 'Toggle'
378    },
379    label2: {
380      prevLabel: 'toggle',
381      nextLabel: 'END'
382    },
383    togglelist1:['Program error', 'Software', 'System', 'Application'],
384  },
385  multiTog(arg, e) {
386    this.error = ' '
387    if (e.checked) {
388      myset.add(arg)
389    } else {
390      myset.delete(arg)
391    }
392    for (let item of myset) {
393      this.error += item + ' '
394    }
395  },
396  settcolor(e) {
397    this.tcolor = e.newValue
398  },
399  settsize(e) {
400    this.tsize = e.newValue
401  }
402}
403```
404
405![en-us_image_0000001189249862](figures/en-us_image_0000001189249862.gif)
406