Step Component
Category: NavigationThe step component can implement both historical progress trackers and operational progress indicators in step-bar format.
Introduction
The step component is typically used to represent a complete process containing multiple key nodes. Usage scenarios include: historical processes, operation progress, procedure steps, etc.
This framework names it step, while other UI frameworks may call it history, but they are essentially similar.
Basic Usage
The oc-step tag represents this framework's step component. The simplest usage is passing a simple array to the content attribute (the array values don't matter).
- Output
- HTML
Node Types
The type attribute can change the key node types. Available options:
- dot: Small circle (default)
- dot-fill: Filled small circle
- circle: Large circle
- circle-fill: Filled large circle
- plain: Large text without decoration
- Output
- HTML
Actual Progress
To show actual progress, use the active attribute to indicate current progress (0 = first step, 1 = second step, etc.)
- Output
- HTML
Attributes
| Name | Type | Values | Default | Description |
|---|---|---|---|---|
| type | string | 'dot'/'dot-fill'/'circle'/'circle-fill'/'plain' | 'dot' | Node type |
| theme | string | 'prim'/'error'/'succ'/'info'/'warn'/'issue'/'text' | 'prim' | Theme style |
| head-show | boolean | '' | false | Whether to show header |
| body-show | boolean | '' | false | Whether to show main text |
| active | number | '' | - | Current step |
| error | string | '' | - | Error step |
| pedding | boolean | '' | false | Whether active step is incomplete |
| content | any[] | '' | - | Data content |
| dir | string | 'h'/'v' | 'h' | Layout direction (h=horizontal, v=vertical) |
| justify | boolean | '' | false | Whether to justify (valid when dir=h) |
| flipped | boolean | '' | false | Whether to reverse order (valid when dir=v) |
Common Methods
Common component methods:
set: Set properties (takes key-value pairs or array)reset: Reset properties (no params)clear: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected: Component connected (no params)disconnected: Component disconnected (no params)adopted: Component moved (no params)set: Property set (receives value)cleared: Property cleared (no params)reset: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})
