Steps

A navigation bar that guides users through a process to complete tasks. Suitable for use when tasks are complex or have a sequential relationship, breaking them down into a series of steps to simplify the task.

Anatomy

1

3

4

Succeeded

2025-01-01

2

Processing

2025-01-01

3

Pending

2025-01-01

2

1: Number

There must be

2. Line

There must be

3: Title

There must be

3: Main text

Optional, displayed by default

Type/Variant

horizontally

Succeeded

2025-01-01

2

Processing

2025-01-01

Error

2022-01-01

4

Pending

2025-01-01

Succeeded

2025-01-01

Processing

2025-01-01

Error

2025-01-01

Pending

2025-01-01

vertical

number

Succeeded

2025-01-01

2

Processing

2025-01-01

Error

2025-01-01

Succeeded

2025-01-01

Processing

2025-01-01

Error

2025-01-01

number

Usage scenario

Succeeded

2025-01-01

2

Processing

2025-01-01

3

Pending

2025-01-01

Label

Succeeded

2025-01-01

2

Processing

2025-01-01

3

Pending

2025-01-01

24

12

12

Multilingual adaptation

SuccessfullySuccessfullySuccessfullySuccessfullySuccessfully

2025-01-01

SuccessfullySuccessfullySuccessfullySuccessfullySuccessfullySuccessfullySuccessfullySuccessfullySuccessfully

2025-01-01 2025-01-01 2025-01-01 2025-01-01

SuccessfullySuccessfullySuccessfully

2025-01-01

2

SuccessfullySuccessfullySuccessfullySuccessfullySuccessfullySuccessfully

2025-01-01 2025-01-01 2025-01-01 2025-01-01

Instructions:

Autowrap

Breakpoint adaptive, with width automatically set by the business according to the layout

RTL

Succeeded

Description

2

Pending

Description

LTR

2

Pending

Description

succeeded

Description

RTL

Usage

Succeeded

2025-01-01

1

Processing

2025-01-01

2

Pending

2025-01-01

Do

Succeeded

2025-01-01

1

Processing

2025-01-01

Don't

Linear process, clear steps, reasonable number of steps (3-5 steps). Error: too many or too few steps, only 2 levels or more than 7 levels.

Design

English