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