1# stepper
2
3>  **NOTE**
4>
5>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<stepper>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process.
8
9
10## Required Permissions
11
12None
13
14
15## Child Components
16
17Only the **\<stepper-item>** component is supported.
18
19>  **NOTE**
20>
21>  Steps in the **\<stepper>** are sorted according to the sequence of its **\<stepper-item>** child components.
22
23
24## Attributes
25
26In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
27
28| Name   | Type    | Default Value | Description                            |
29| ----- | ------ | ---- | ------------------------------ |
30| index | number | 0    | Index of the **\<stepper-item>** child component to display. By default, the first one is displayed.|
31
32
33## Styles
34
35The [universal styles](js-components-common-styles.md) are supported.
36
37>  **NOTE**
38>
39>  By default, the **\<stepper>** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
40
41
42## Events
43
44In addition to the [universal events](js-components-common-events.md), the following events are supported.
45
46| Name    | Parameter                                      | Description                                      |
47| ------ | ---------------------------------------- | ---------------------------------------- |
48| finish | -                                       | Triggered when the last step on the navigator is complete.                   |
49| skip   | -                                       | Triggered when users click the skip button to skip steps.|
50| change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.|
51| next   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in { pendingIndex: pendingIndex } format. You can use **pendingIndex** to specify a **\<stepper-item>** child component as the next step to go. |
52| back   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object: { pendingIndex: pendingIndex } format. You can use **pendingIndex** to specify a **\<stepper-item>** child component as the previous step. |
53
54
55## Methods
56
57In addition to the [universal methods](js-components-common-methods.md), the following methods are supported.
58
59| Name                 | Parameter                                      | Description                                      |
60| ------------------- | ---------------------------------------- | ---------------------------------------- |
61| setNextButtonStatus | { status: string, label: label } | Sets the text and status of the next button in the step navigator. **label** indicates the button text, and **status** indicates the button status. Available **status** values are as follows:<br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.<br>- **disabled**: The next button is grayed out and unavailable.<br>- **waiting**: The next button is not displayed, and a process bar is displayed instead.<br>- **skip**: The skip button is displayed to allow users to skip all remaining steps.|
62
63
64## Example
65
66```html
67<!-- xxx.hml -->
68<div class="container">
69    <stepper class="stepper" id="mystepper" onnext="nextclick" onback="backclick" onchange="statuschange"
70             onfinish="finish" onskip="skip" style="height : 100%;">
71        <stepper-item class="stepper-item" label="{{ label_1 }}">
72            <div class="item">
73                <text>Page One</text>
74                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
75            </div>
76        </stepper-item>
77        <stepper-item class="stepper-item" label="{{ label_2 }}">
78            <div class="item">
79                <text>Page Two</text>
80                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
81            </div>
82        </stepper-item>
83        <stepper-item class="stepper-item" label="{{ label_3 }}">
84            <div class="item">
85                <text>Page Three</text>
86                <button type="capsule" class="button" value="change status" onclick="setRightButton"></button>
87            </div>
88        </stepper-item>
89    </stepper>
90</div>
91```
92
93```css
94/* xxx.css */
95.container {
96    flex-direction: column;
97    align-items: center;
98    height: 100%;
99    width: 100%;
100    background-color: #f7f7f7;
101}
102.stepper{
103    width: 100%;
104    height: 100%;
105}
106.stepper-item {
107    width: 100%;
108    height: 100%;
109    flex-direction: column;
110    align-items: center;
111}
112.item{
113    width: 90%;
114    height: 86%;
115    margin-top: 80px;
116    background-color: white;
117    border-radius: 60px;
118    flex-direction: column;
119    align-items: center;
120    padding-top: 160px;
121}
122text {
123    font-size: 78px;
124    color: #182431;
125    opacity: 0.4;
126}
127.button {
128    width: 40%;
129    margin-top: 100px;
130    justify-content: center;
131}
132```
133
134```js
135// xxx.js
136import prompt from '@ohos.promptAction';
137
138export default {
139    data: {
140        label_1:
141        {
142            prevLabel: 'BACK',
143            nextLabel: 'NEXT',
144            status: 'normal'
145        },
146        label_2:
147        {
148            prevLabel: 'BACK',
149            nextLabel: 'NEXT',
150            status: 'normal'
151        },
152        label_3:
153        {
154            prevLabel: 'BACK',
155            nextLabel: 'NEXT',
156            status: 'normal'
157        }
158    },
159    setRightButton(e) {
160        this.$element('mystepper').setNextButtonStatus({
161            status: 'waiting', label: 'SKIP'
162        });
163    },
164    nextclick(e) {
165        var index = {
166            pendingIndex: e.pendingIndex
167        }
168        return index;
169    },
170    backclick(e) {
171        var index = {
172            pendingIndex: e.pendingIndex
173        }
174        return index;
175    },
176    statuschange(e) {
177        prompt.showToast({
178            message: 'Previous step index' + e.prevIndex + 'Current step index' + e.index
179        })
180    },
181    finish() {
182        prompt.showToast({
183            message:'Finished.'
184        })
185    },
186    skip() {
187        prompt.showToast({
188            message: 'Skip triggered'
189        })
190    }
191}
192```
193
194![](figures/stepper.gif)
195