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