• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# stepper开发指导
2
3当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。具体用法请参考[stepper API](../reference/arkui-js/js-components-container-stepper.md)。
4
5
6> **说明：**
7> 从API Version 5 开始支持。
8
9
10## 创建stepper组件
11
12在pages/index目录下的hml文件中创建一个stepper组件。
13
14```html
15<!-- xxx.hml -->
16<div class="container">
17 <stepper>
18   <stepper-item>
19     <text>Step 1</text>
20   </stepper-item>
21   <stepper-item>
22     <text>Step 2</text>
23   </stepper-item>
24 </stepper>
25</div>
26```
27
28```css
29/* xxx.css */
30.container {
31  width:100%;
32  height:100%;
33  flex-direction: column;
34  justify-content: center;
35  align-items: center;
36  background-color: #F1F3F5;
37}
38text{
39  width: 100%;
40  height: 100%;
41  text-align: center;
42}
43```
44
45![zh-cn_image_0000001234289455](figures/zh-cn_image_0000001234289455.gif)
46
47
48## 设置index属性
49
50页面默认显示索引值为index的步骤。
51
52```html
53<!-- xxx.hml -->
54<div class="container">
55 <stepper index="2">
56   <stepper-item>
57     <text>stepper-item1</text>
58   </stepper-item>
59   <stepper-item>
60     <text>stepper-item2</text>
61   </stepper-item>
62   <stepper-item>
63     <text>stepper-item3</text>
64   </stepper-item>
65  </stepper>
66</div>
67```
68
69```css
70/* xxx.css */
71.container {
72  width:100%;
73  height:100%;
74  flex-direction: column;
75  background-color: #F1F3F5;
76}
77text{
78  width: 100%;
79  height: 100%;
80  text-align: center;
81}
82```
83
84![zh-cn_image_0000001234011019](figures/zh-cn_image_0000001234011019.gif)
85
86通过设置label属性，自定义stepper-item的提示按钮。
87
88```html
89<!-- xxx.hml -->
90<div class="container">
91 <stepper index="1">
92   <stepper-item label="{{label_1}}">
93     <text>stepper-item1</text>
94   </stepper-item>
95   <stepper-item label="{{label_2}}">
96     <text>stepper-item2</text>
97   </stepper-item>
98   <stepper-item label="{{label_3}}">
99     <text>stepper-item3</text>
100   </stepper-item>
101   <stepper-item>
102     <text>stepper-item4</text>
103   </stepper-item>
104 </stepper>
105</div>
106```
107
108```css
109/* xxx.css */
110.container {
111  width:100%;
112  height:100%;
113  flex-direction: column;
114  background-color: #F1F3F5;
115}
116text{
117  width: 100%;
118  height: 100%;
119  text-align: center;
120}
121```
122
123```js
124// xxx.js
125export default {
126  data: {
127    label_1:{
128      nextLabel: 'NEXT',
129      status: 'normal'
130    },
131    label_2:{
132      prevLabel: 'BACK',
133      nextLabel: 'NEXT',
134      status: 'normal'
135    },
136    label_3:{
137      prevLabel: 'BACK',
138      nextLabel: 'END',
139      status: 'disabled'
140    },
141  },
142}
143```
144
145![zh-cn_image_0000001163531210](figures/zh-cn_image_0000001163531210.gif)
146
147
148## 设置样式
149
150stepper组件默认填充父容器，通过border和background-color设置边框、背景色。
151```html
152<!-- xxx.hml -->
153<div class="container" >
154  <div class="stepperContent">
155    <stepper class="stepperClass">
156      <stepper-item>
157        <text>stepper-item1</text>
158      </stepper-item>
159    </stepper>
160  </div>
161</div>
162```
163
164```css
165/* xxx.css */
166.container {
167  width:100%;
168  height:100%;
169  flex-direction: column;
170  align-items: center;
171  justify-content: center;
172  background-color:#F1F3F5;
173}
174.stepperContent{
175  width: 300px;
176  height: 300px;
177}
178.stepperClass{
179  border:1px solid silver ;
180  background-color: white;
181}
182text{
183  width: 100%;
184  height: 100%;
185  text-align: center;
186}
187```
188
189![zh-cn_image_0000001234130975](figures/zh-cn_image_0000001234130975.png)
190
191
192## 添加事件
193
194stepper分别添加finish，change，next，back，skip事件。
195
196- 当change与next或back同时存在时，会先执行next或back事件再去执行change事件。
197
198- 重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。
199
200```html
201<!-- xxx.hml -->
202<div class="container"  style="background-color:#F1F3F5;">
203  <div >
204    <stepper onfinish="stepperFinish" onchange="stepperChange" onnext="stepperNext" onback="stepperBack" onskip="stepperSkip" id="stepperId" index="{{index}}">
205      <stepper-item>
206        <text>stepper-item1</text>
207        <button value="skip" onclick="skipClick"></button>
208      </stepper-item>
209      <stepper-item>
210         <text>stepper-item2</text>
211         <button value="skip" onclick="skipClick"></button>
212      </stepper-item>
213      <stepper-item>
214        <text>stepper-item3</text>
215      </stepper-item>
216    </stepper>
217  </div>
218</div>
219```
220
221```css
222/* xxx.css */
223.doc-page {
224  width:100%;
225  height:100%;
226  flex-direction: column;
227  align-items: center;
228  justify-content: center;
229}
230stepper-item{
231  width: 100%;
232  flex-direction: column;
233  align-self: center;
234  justify-content: center;
235}
236text{
237  margin-top: 45%;
238  justify-content: center;
239  align-self: center;
240  margin-bottom: 50px;
241}
242button{
243  width: 80%;
244  height: 60px;
245  margin-top: 20px;
246}
247```
248
249```js
250// xxx.js
251import promptAction from '@ohos.promptAction';
252export default {
253  data: {
254    index:0,
255  },
256   stepperSkip(){
257    this.index = null;
258    this.index=2;
259  },
260   skipClick(){
261    this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
262  },
263  stepperFinish(){
264    promptAction.showToast({
265      message: 'All Finished'
266    })
267  },
268  stepperChange(e){
269    console.log("stepperChange"+e.index)
270    promptAction.showToast({
271      // index表示当前步骤的序号
272      message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
273    })
274  },
275  stepperNext(e){
276    console.log("stepperNext"+e.index)
277    promptAction.showToast({
278      // pendingIndex表示将要跳转的序号
279      message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
280    })
281    var index = {pendingIndex:e.pendingIndex }
282    return index;
283  },
284  stepperBack(e){
285    console.log("stepperBack"+e.index)
286    var index = {pendingIndex: e.pendingIndex }
287    return index;
288  }
289}
290```
291
292![zh-cn_image_0000001189089950](figures/zh-cn_image_0000001189089950.gif)
293
294
295## 场景示例
296
297在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。
298
299用stepper组件实现分步，再创建[Toggle](../reference/arkui-js/js-components-basic-toggle.md)组件实现选择显示功能，再使用[Select](../reference/arkui-js/js-components-basic-select.md)组件实现改变选中值动态修改字体颜色或大小。
300
301```html
302<!-- xxx.hml -->
303<div class="container">
304  <stepper id="mystep" index="0" onfinish="back" style="text-color: indigo;">
305    <stepper-item label="{{label1}}">
306      <div style="flex-direction: column;padding: 0px 10px;">
307        <text class="text" style="margin-top: 10%;text-align: center;width: 100%;">Select error types:</text>
308        <text style="margin-top: 20px;padding: 10px">
309          <span>{{error}}</span>
310        </text>
311        <div style="justify-content: space-around;flex-wrap: wrap;">
312          <toggle for="{{togglelist1}}" value="{{$item}}" class="tog" onchange="multiTog({{$item}})"></toggle>
313        </div>
314      </div>
315    </stepper-item>
316    <stepper-item label="{{label2}}">
317      <div style="flex-direction: column;align-items: center;">
318        <text class="txt" style="margin-top: 10%;">Toggle</text>
319        <div style="justify-content: space-around;flex-wrap: wrap;;margin-top:10%">
320          <toggle class="tog" for="{{togglelist1}}" value="{{$item}}" style="text-color: {{tcolor}};font-size: {{tsize}}; font-style: {{tstyle}};font-weight: {{tweight}};font-family: {{tfamily}};">
321          </toggle>
322        </div>
323        <div style="flex-wrap: wrap;width: 700px;margin-top:10%">
324          <div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
325            <text class="txt">text-color</text>
326            <select onchange="settcolor">
327              <option for="{{color_list}}" value="{{$item}}">{{$item}}</option>
328            </select>
329          </div>
330          <div style="flex-direction: column;width: 350px;height: 185px;align-items: center;">
331            <text class="txt">font-size</text>
332            <select onchange="settsize">
333              <option for="{{size_list}}" value="{{$item}}">{{$item}}</option>
334            </select>
335          </div>
336        </div>
337      </div>
338    </stepper-item>
339  </stepper>
340</div>
341```
342
343```css
344/* xxx.css */
345.container {
346  width:100%;
347  height:100%;
348  flex-direction: column;
349  align-items: center;
350  justify-content: center;
351  background-color:#F1F3F5;
352}
353.dvd {
354  stroke-width: 8px;
355  color: orangered;
356  margin: 65px;
357}
358.tog{
359  margin-right: 20px;
360  margin-top: 30px;
361}
362```
363
364```js
365// xxx.js
366let myset = new Set();
367export default {
368  data: {
369    error: '',
370    tcolor:'#FF4500',
371    color_list:['#FF4500','#5F9EA0','#0000FF'],
372    tsize: '12px',
373    size_list: ['12px', '30px', '8px', '50px'],
374    label1: {
375      prevLabel: 'The text on the left of the starting step is invalid.',
376      nextLabel: 'Toggle'
377    },
378    label2: {
379      prevLabel: 'toggle',
380      nextLabel: 'END'
381    },
382    togglelist1:['Program error', 'Software', 'System', 'Application'],
383  },
384  multiTog(arg, e) {
385    this.error = ' '
386    if (e.checked) {
387      myset.add(arg)
388    } else {
389      myset.delete(arg)
390    }
391    for (let item of myset) {
392      this.error += item + ' '
393    }
394  },
395  settcolor(e) {
396    this.tcolor = e.newValue
397  },
398  settsize(e) {
399    this.tsize = e.newValue
400  }
401}
402```
403
404![zh-cn_image_0000001189249862](figures/zh-cn_image_0000001189249862.gif)
405
406