1# stepper
2
3>  **说明：**
4>  从API version 5开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6步骤导航器。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。
7
8
9## 权限列表
10
11无
12
13
14## 子组件
15
16仅支持<stepper-item>子组件。
17
18>  **说明：**
19>  步骤导航器内的步骤顺序按照子组件<stepper-item>的顺序进行排序。
20
21
22## 属性
23
24除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
25
26| 名称    | 类型     | 默认值  | 描述                             |
27| ----- | ------ | ---- | ------------------------------ |
28| index | number | 0    | 设置步骤导航器步骤显示第几个stepper-item子组件，默认显示第一个stepper-item。 |
29
30
31## 样式
32
33支持[通用样式](js-components-common-styles.md)。
34
35>  **说明：**
36>  stepper组件默认占满父容器大小，建议父组件使用应用窗口大小（或者父组件为根节点）来优化体验。
37
38
39## 事件
40
41除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
42
43| 名称     | 参数                                       | 描述                                       |
44| ------ | ---------------------------------------- | ---------------------------------------- |
45| finish | 无                                        | 当步骤导航器最后一个步骤完成时,触发该事件。                    |
46| skip   | 无                                        | 当前步骤导航器下一步按钮状态为skip，即可跳过时，点击右侧跳过按钮触发该事件。 |
47| change | { prevIndex：prevIndex, index: index} | 当用户点击步骤导航器的左边或者右边按钮进行步骤切换时触发该事件，prevIndex表示老步骤的序号，index表示新步骤的序号。 |
48| next   | { index：index, pendingIndex: pendingIndex } | 当用户点击下一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改下一个步骤使用哪个stepper-item子组件。 |
49| back   | { index：index, pendingIndex: pendingIndex } | 当用户点击上一步按钮时触发该事件，index表示当前步骤序号，pendingIndex表示将要跳转的序号，该事件有返回值，返回值格式为Object：{ pendingIndex：pendingIndex }，可以通过指定pendingIndex来修改上一个步骤使用哪个stepper-item子组件。 |
50
51
52## 方法
53
54除支持[通用方法](js-components-common-methods.md)外，支持如下方法：
55
56| 名称                  | 参数                                       | 描述                                       |
57| ------------------- | ---------------------------------------- | ---------------------------------------- |
58| setNextButtonStatus | {&nbsp;status:&nbsp;string,&nbsp;label:&nbsp;label&nbsp;} | 设置当前步骤中下一步按钮的文本与状态，参数中label为指定按钮文本，status指定按钮状态，status可选值为：<br/>-&nbsp;normal：正常状态，下一步文本按钮正常显示，可点击进入下一个步骤；<br/>-&nbsp;disabled：不可用状态，下一步文本按钮灰度显示，不可点击进入下一个步骤；<br/>-&nbsp;waiting：等待状态，下一步文本按钮不显示，使用等待进度条，不可点击进入下一个步骤。<br/>-&nbsp;skip：跳过状态，下一步文本按钮显示跳过按钮，点击时会跳过剩下步骤。 |
59
60
61## 示例
62
63```html
64<!-- xxx.hml -->
65<div class="container">
66    <stepper class="stepper" id="mystepper" onnext="nextclick" onback="backclick" onchange="statuschange"
67             onfinish="finish" onskip="skip" style="height : 100%;">
68        <stepper-item class="stepper-item" label="{{ label_1 }}">
69            <div class="item">
70                <text>Page One</text>
71                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
72            </div>
73        </stepper-item>
74        <stepper-item class="stepper-item" label="{{ label_2 }}">
75            <div class="item">
76                <text>Page Two</text>
77                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
78            </div>
79        </stepper-item>
80        <stepper-item class="stepper-item" label="{{ label_3 }}">
81            <div class="item">
82                <text>Page Three</text>
83                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
84            </div>
85        </stepper-item>
86    </stepper>
87</div>
88```
89
90```css
91/* xxx.css */
92.container {
93    flex-direction: column;
94    align-items: center;
95    height: 100%;
96    width: 100%;
97    background-color: #f7f7f7;
98}
99.stepper{
100    width: 100%;
101    height: 100%;
102}
103.stepper-item {
104    width: 100%;
105    height: 100%;
106    flex-direction: column;
107    align-items: center;
108}
109.item{
110    width: 90%;
111    height: 86%;
112    margin-top: 80px;
113    background-color: white;
114    border-radius: 60px;
115    flex-direction: column;
116    align-items: center;
117    padding-top: 160px;
118}
119text {
120    font-size: 78px;
121    color: #182431;
122    opacity: 0.4;
123}
124.button {
125    width: 40%;
126    margin-top: 100px;
127    justify-content: center;
128}
129```
130
131```js
132// xxx.js
133import prompt from '@ohos.promptAction';
134
135export default {
136    data: {
137        label_1:
138        {
139            prevLabel: 'BACK',
140            nextLabel: 'NEXT',
141            status: 'normal'
142        },
143        label_2:
144        {
145            prevLabel: 'BACK',
146            nextLabel: 'NEXT',
147            status: 'normal'
148        },
149        label_3:
150        {
151            prevLabel: 'BACK',
152            nextLabel: 'NEXT',
153            status: 'normal'
154        }
155    },
156    setRightButton(e) {
157        this.$element('mystepper').setNextButtonStatus({
158            status: 'waiting', label: 'SKIP'
159        });
160    },
161    nextclick(e) {
162        var index = {
163            pendingIndex: e.pendingIndex
164        }
165        return index;
166    },
167    backclick(e) {
168        var index = {
169            pendingIndex: e.pendingIndex
170        }
171        return index;
172    },
173    statuschange(e) {
174        prompt.showToast({
175            message: '上一步序号' + e.prevIndex + '当前序号' + e.index
176        })
177    },
178    finish() {
179        prompt.showToast({
180            message: '最后一步已完成'
181        })
182    },
183    skip() {
184        prompt.showToast({
185            message: 'skip触发'
186        })
187    }
188}
189```
190
191![](figures/stepper.gif)
192