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](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 27 28| Name | Type | Default Value | Description | 29| ----- | ------ | ---- | ------------------------------ | 30| index | number | - | Index of the **\<stepper-item>** child component that is currently displayed.| 31 32 33## Styles 34 35The [universal styles](../arkui-js/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](../arkui-js/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, which works only if you have called **setNextButtonStatus** method to allow users to skip all 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](../arkui-js/js-components-common-methods.md), the following methods are supported. 58 59| Name | Parameter | Description | 60| ------------------- | ---------------------------------------- | ---------------------------------------- | 61| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. 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" index="0" onnext="nextclick" onback="backclick"> 70 <stepper-item class ="stepperItem" label="{{label_1}}"> 71 <div class = "stepperItemContent" > 72 <text class = "text">First screen</text> 73 </div> 74 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 75 </stepper-item> 76 <stepper-item class ="stepperItem" label="{{label_2}}"> 77 <div class = "stepperItemContent" > 78 <text class = "text">Second screen</text> 79 </div> 80 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 81 </stepper-item> 82 <stepper-item class ="stepperItem" label="{{label_3}}"> 83 <div class = "stepperItemContent" > 84 <text class = "text">Third screen</text> 85 </div> 86 <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button> 87 </stepper-item> 88 </stepper> 89</div> 90``` 91 92```css 93/* xxx.css */ 94.container { 95 margin-top: 20px; 96 flex-direction: column; 97 align-items: center; 98 height: 300px; 99} 100.stepperItem { 101 width: 100%; 102 flex-direction: column; 103 align-items: center; 104} 105.stepperItemContent { 106 color: #0000ff; 107 font-size: 50px; 108 justify-content: center; 109} 110.button { 111 width: 60%; 112 margin-top: 30px; 113 justify-content: center; 114} 115``` 116 117```js 118// xxx.js 119export default { 120 data: { 121 label_1: 122 { 123 prevLabel: 'BACK', 124 nextLabel: 'NEXT', 125 status: 'normal' 126 }, 127 label_2: 128 { 129 prevLabel: 'BACK', 130 nextLabel: 'NEXT', 131 status: 'normal' 132 }, 133 label_3: 134 { 135 prevLabel: 'BACK', 136 nextLabel: 'NEXT', 137 status: 'normal' 138 }, 139 }, 140 setRightButton(e) { 141 this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'}); 142 }, 143 nextclick(e) { 144 var index = { 145 pendingIndex: e.pendingIndex 146 } 147 return index; 148 }, 149 backclick(e) { 150 var index = { 151 pendingIndex: e.pendingIndex 152 } 153 return index; 154 }, 155} 156``` 157 158 159
