• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Stepper
2
3The **\<Stepper>** component provides a step navigator.
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
21**Parameters**
22
23| Name| Type| Mandatory | Description|
24| ------| -------- | --------------- | -------- |
25| index | number   | No| Index of the **\<StepperItem>** that is currently displayed.<br>Default value: **0**|
26
27
28## Attributes
29
30None
31
32
33## Events
34
35| Name| Description|
36| -------- | -------- |
37| onFinish(callback: () =&gt; void) | Invoked when the **nextLabel** of the last **\<StepperItem>** in the **\<Stepper>** is clicked and the **ItemState** attribute is set to **Normal**.|
38| onSkip(callback: () =&gt; void) | Invoked when the current **\<StepperItem>** is **ItemState.Skip** and the **nextLabel** is clicked.|
39| onChange(callback: (prevIndex?: number, index?: number) =&gt; void) | Invoked 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**.<br>- **prevIndex**: index of the step page before the switching.<br>- **index**: index of the step page after the switching, that is, index of the previous or next step page.|
40| onNext(callback: (index?: number, pendingIndex?: number) =&gt; void) | Invoked when the **nextLabel** of the current (not the last) **\<StepperItem>** is clicked and the **ItemState** attribute is set to **Normal**.<br>- **index**: index of the current step page.<br>- **pendingIndex**: index of the next step page.|
41| onPrevious(callback: (index?: number, pendingIndex?: number) =&gt; void) | Invoked when the **prevLabel** of the current **\<StepperItem>** is clicked to switch to the previous step page.<br>- **index**: index of the current step page.<br>- **pendingIndex**: index of the previous step page.|
42
43
44## Example
45
46```ts
47// xxx.ets
48@Styles function itemStyle () {
49  .width(336)
50  .height(621)
51  .margin({ top: 48, left: 12 })
52  .borderRadius(24)
53  .backgroundColor('#FFFFFF')
54}
55
56@Extend(Text) function itemTextStyle () {
57  .fontColor('#182431')
58  .fontSize(36)
59  .fontWeight(500)
60  .opacity(0.4)
61  .margin({ top: 82, bottom: 40 })
62}
63
64@Entry
65@Component
66struct StepperExample {
67  @State currentIndex: number = 0
68  @State firstState: ItemState = ItemState.Normal
69  @State secondState: ItemState = ItemState.Normal
70  @State thirdState: ItemState = ItemState.Normal
71
72  build() {
73    Stepper({
74      index: this.currentIndex
75    }) {
76      // First step page
77      StepperItem() {
78        Column() {
79          Text('Page One')
80            .itemTextStyle()
81          Button('change status:' + this.firstState)
82            .backgroundColor('#007dFF')
83            .onClick(() => {
84              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
85            })
86        }.itemStyle()
87      }
88      .nextLabel('Next')
89      .status(this.firstState)
90      // Second step page
91      StepperItem() {
92        Column() {
93          Text('Page Two')
94            .itemTextStyle()
95          Button('change status:' + this.secondState)
96            .backgroundColor('#007dFF')
97            .onClick(() => {
98              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
99            })
100        }.itemStyle()
101      }
102      .nextLabel('Next')
103      .prevLabel('Previous')
104      .status(this.secondState)
105      // Third step page
106      StepperItem() {
107        Column() {
108          Text('Page Three')
109            .itemTextStyle()
110          Button('change status:' + this.thirdState)
111            .backgroundColor('#007dFF')
112            .onClick(() => {
113              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
114            })
115        }.itemStyle()
116      }
117      .status(this.thirdState)
118      // Fourth step page
119      StepperItem() {
120        Column() {
121          Text('Page Four')
122            .itemTextStyle()
123        }.itemStyle()
124      }
125    }
126    .backgroundColor('#F1F3F5')
127    .onFinish(() => {
128      // Define the processing logic for when Finish on the last page is clicked, for example, redirection.
129      console.info('onFinish')
130    })
131    .onSkip(() => {
132      // 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.
133      console.info('onSkip')
134    })
135    .onChange((prevIndex: number, index: number) => {
136      this.currentIndex = index
137    })
138  }
139}
140```
141
142
143![stepper](figures/stepper.gif)
144