1# Stepper
2
3The **Stepper** component provides a step navigator, suitable for guiding users through a step-by-step task completion process.
4
5
6>  **NOTE**
7>
8> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10
11## Child Components
12
13Only the child component [StepperItem](ts-basic-components-stepperitem.md) is supported.
14
15
16## APIs
17
18Stepper(value?: { index?: number })
19
20**Atomic service API**: This API can be used in atomic services since API version 11.
21
22**System capability**: SystemCapability.ArkUI.ArkUI.Full
23
24**Parameters**
25
26| Name| Type| Mandatory | Description|
27| ------| -------- | --------------- | -------- |
28| value | { index?: number }   | No| Index of the **StepperItem** that is currently displayed.<br>Default value: **0**<br>Since API version 10, this parameter supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).|
29
30
31## Attributes
32
33None
34
35## Events
36
37### onFinish
38
39onFinish(callback: () => void)
40
41Invoked when the **nextLabel** of the last **StepperItem** in the **Stepper** is clicked and the **ItemState** attribute is set to **Normal**.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47### onSkip
48
49onSkip(callback: () =&gt; void)
50
51Invoked when the current **StepperItem** is **ItemState.Skip** and the **nextLabel** is clicked.
52
53**Atomic service API**: This API can be used in atomic services since API version 11.
54
55**System capability**: SystemCapability.ArkUI.ArkUI.Full
56
57### onChange
58
59onChange(callback: (prevIndex: number, index: number) =&gt; void)
60
61Invoked when the **prevLabel** of the current **StepperItem** is clicked to switch to the previous step page; or when the **nextLabel** of the current (not the last) **StepperItem** is clicked to switch to the next step page and the **ItemState** attribute is set to **Normal**.
62
63**Atomic service API**: This API can be used in atomic services since API version 11.
64
65**System capability**: SystemCapability.ArkUI.ArkUI.Full
66
67**Parameters**
68
69| Name   | Type  | Mandatory| Description                                      |
70| --------- | ------ | ---- | ------------------------------------------ |
71| prevIndex | number | Yes  | Index of the step page before the switching.                    |
72| index     | number | Yes  | Index of the step page after the switching, that is, index of the previous or next page.|
73
74### onNext
75
76onNext(callback: (index: number, pendingIndex: number) =&gt; void)
77
78Invoked when the **nextLabel** of the current (not the last) **StepperItem** is clicked and the **ItemState** attribute is set to **Normal**.
79
80**Atomic service API**: This API can be used in atomic services since API version 11.
81
82**System capability**: SystemCapability.ArkUI.ArkUI.Full
83
84**Parameters**
85
86| Name      | Type  | Mandatory| Description              |
87| ------------ | ------ | ---- | ------------------ |
88| index        | number | Yes  | Index of the current step page.|
89| pendingIndex | number | Yes  | Index of the next step page.|
90
91### onPrevious
92
93onPrevious(callback: (index: number, pendingIndex: number) =&gt; void)
94
95Invoked when the **prevLabel** of the current **StepperItem** is clicked to switch to the previous step page.
96
97**Atomic service API**: This API can be used in atomic services since API version 11.
98
99**System capability**: SystemCapability.ArkUI.ArkUI.Full
100
101**Parameters**
102
103| Name      | Type  | Mandatory| Description              |
104| ------------ | ------ | ---- | ------------------ |
105| index        | number | Yes  | Index of the current step page.|
106| pendingIndex | number | Yes  | Index of the previous step page.|
107
108
109## Example
110
111```ts
112// xxx.ets
113@Styles function itemStyle () {
114  .width(336)
115  .height(621)
116  .margin({ top: 48, left: 12 })
117  .borderRadius(24)
118  .backgroundColor('#FFFFFF')
119}
120
121@Extend(Text) function itemTextStyle () {
122  .fontColor('#182431')
123  .fontSize(36)
124  .fontWeight(500)
125  .opacity(0.4)
126  .margin({ top: 82, bottom: 40 })
127}
128
129@Entry
130@Component
131struct StepperExample {
132  @State currentIndex: number = 0
133  @State firstState: ItemState = ItemState.Normal
134  @State secondState: ItemState = ItemState.Normal
135  @State thirdState: ItemState = ItemState.Normal
136
137  build() {
138    Stepper({
139      index: this.currentIndex
140    }) {
141      // First step page
142      StepperItem() {
143        Column() {
144          Text('Page One')
145            .itemTextStyle()
146          Button('change status:' + this.firstState)
147            .backgroundColor('#007dFF')
148            .onClick(() => {
149              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
150            })
151        }.itemStyle()
152      }
153      .nextLabel('Next')
154      .status(this.firstState)
155      // Second step page
156      StepperItem() {
157        Column() {
158          Text('Page Two')
159            .itemTextStyle()
160          Button('change status:' + this.secondState)
161            .backgroundColor('#007dFF')
162            .onClick(() => {
163              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
164            })
165        }.itemStyle()
166      }
167      .nextLabel('Next')
168      .prevLabel('Previous')
169      .status(this.secondState)
170      // Third step page
171      StepperItem() {
172        Column() {
173          Text('Page Three')
174            .itemTextStyle()
175          Button('change status:' + this.thirdState)
176            .backgroundColor('#007dFF')
177            .onClick(() => {
178              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
179            })
180        }.itemStyle()
181      }
182      .status(this.thirdState)
183      // Fourth step page
184      StepperItem() {
185        Column() {
186          Text('Page Four')
187            .itemTextStyle()
188        }.itemStyle()
189      }
190    }
191    .backgroundColor('#F1F3F5')
192    .onFinish(() => {
193      // Define the processing logic for when Finish on the last page is clicked, for example, redirection.
194      console.info('onFinish')
195    })
196    .onSkip(() => {
197      // Define the processing logic for when Skip on the page is clicked, for example, dynamically changing the index of the <Stepper> to redirect to a specific step.
198      console.info('onSkip')
199    })
200    .onChange((prevIndex?: number, index?: number) => {
201      if(index){
202        this.currentIndex = index
203      }
204    })
205  }
206}
207```
208
209
210![stepper](figures/stepper.gif)
211