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