1# stepper开发指导
2
3当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。具体用法请参考[stepper API](../reference/apis-arkui/arkui-js/js-components-container-stepper.md)。
4
5
6## 创建stepper组件
7
8在pages/index目录下的hml文件中创建一个stepper组件。
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![zh-cn_image_0000001234289455](figures/zh-cn_image_0000001234289455.gif)
42
43
44## 设置index属性
45
46页面默认显示索引值为index的步骤。
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![zh-cn_image_0000001234011019](figures/zh-cn_image_0000001234011019.gif)
81
82通过设置label属性，自定义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![zh-cn_image_0000001163531210](figures/zh-cn_image_0000001163531210.gif)
142
143
144## 设置样式
145
146stepper组件默认填充父容器，通过border和background-color设置边框、背景色。
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![zh-cn_image_0000001234130975](figures/zh-cn_image_0000001234130975.png)
186
187
188## 添加事件
189
190stepper分别添加finish，change，next，back，skip事件。
191
192- 当change与next或back同时存在时，会先执行next或back事件再去执行change事件。
193
194- 重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。
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表示当前步骤的序号
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表示将要跳转的序号
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![zh-cn_image_0000001189089950](figures/zh-cn_image_0000001189089950.gif)
289
290
291## 场景示例
292
293在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。
294
295用stepper组件实现分步，再创建[Toggle](../reference/apis-arkui/arkui-js/js-components-basic-toggle.md)组件实现选择显示功能，再使用[Select](../reference/apis-arkui/arkui-js/js-components-basic-select.md)组件实现改变选中值动态修改字体颜色或大小。
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![zh-cn_image_0000001189249862](figures/zh-cn_image_0000001189249862.gif)