# StepNavigator

### Introduction<a name="section104mcpsimp"></a>

This sample shows how to use the  **<stepper\>**  component and its child component  **<stepper-item\>**  in the JavaScript UI framework. When multiple steps are required to complete a task, you can use the  **<stepper\>**  component to navigate your users through the whole process.

### Usage<a name="section107mcpsimp"></a>

1. On the sample app, touch  **NEXT**  as prompted. When the last step is complete, the home screen is displayed.

2. On the home screen, touch  **RESET**  to return to the first step.

3. In the third step, select  **Skip subsequent steps**  and touch  **SKIP**  to go to the home screen.

### Constraints<a name="section112mcpsimp"></a>

This sample can only be run on standard-system devices.

# 步骤导航器

### 简介

本示例展示了JS UI 框架中stepper组件和 stepper-item子组件的使用方法。当完成一个任务需要多个步骤时，可以使用步骤导航器展示当前进展。

实现效果如下：

![](screenshots/device/stepper_1.png) ![](screenshots/device/stepper_2.png)

### 相关概念

Stepper：步骤导航器。

StepperItem：步骤导航器元素。

### 相关权限

不涉及。

### 使用说明

1.依据导航提示执行下一步，步骤执行结束后进入主页。

2.进入主页后，点击**重置**重新回到步骤一。

3.在第三步中可选择“同意跳过后续步骤”，再点击**跳过**直接进入主页。

### 约束与限制

1.本示例仅支持标准系统上运行。

2.本示例需要使用DevEco Studio 3.0 Beta4 (Build Version: 3.0.0.992, built on July 14, 2022)才可编译运行。