Step Component: How to Use Data and Customize Styles

Last updated: 1 month ago

Category: Examples

The step component can implement both historical progress trackers and operational progress indicators in step-bar format.

Standard Data Structure

The content attribute value will ultimately be converted to a standard array of objects data structure, with each item containing the following properties:

Data in Node Content

For complex data that's inconvenient to write in attributes, you can place the content data inside the node itself.

Using Hyperlinks

When step navigation requires page redirection, use the href attribute to convert the step node into an <a> tag.

SEO Optimization

For search engine optimization (SEO), you can directly use hyperlink tags in the root node and write all attributes on the <a> tags.

Node Types

Progress nodes are displayed as small circles by default. To change the node type, use the type attribute:

Pending Status

To indicate that the current active node is in an incomplete state, add the pending attribute.

Error States

When one or more steps encounter errors, use the error attribute.

Displaying Specific Content

The following examples demonstrate how to display content according to requirements.

Justified Alignment

By default, each progress item is center-aligned and doesn't stretch to the edges.

Theme Styles

The theme attribute sets the visual style, with options including: prim (default), error, succ, info, warn, issue, and text.

Vertical Layout

For vertical arrangement, use the dir attribute. The default value is 'h' (horizontal), while 'dir=v' creates a vertical layout.

Vertical Layout with Complete Data

All horizontal data formats are also compatible with vertical layouts.

Vertical Inversion

In vertical layouts where the last step appears at the bottom, the flipped attribute can be added to reverse the order (placing the last step at the top).