Component Properties
| Properties | Description |
|---|---|
mode | (required) defines how the StepIndicator should work. Use static for non-interactive steps. Use strict for a chronological step order, also, the user can navigate between visited steps. Use loose if the user should be able to navigate freely. |
data | (required) defines the data/steps showing up in a JavaScript Array or JSON format like [{title,is_current}]. See parameters and the example above. |
sidebar_id | (required) a unique string-based ID in order to bind together the main component and the sidebar (<StepIndicator.Sidebar />). Both have to get the same ID. |
current_step | (optional) defines the active number marked step starting by 0. Defaults to 0. |
hide_numbers | (optional) define whether to show automatically counted numbers or not. Defaults to false. |
no_animation | (optional) if set to true, the height animation on the step items and the drawer button will be omitted. Defaults to false. |
on_item_render | (optional) callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC { StepItem, element, attributes, props, context }. |
| Space | (optional) spacing properties like top or bottom are supported. |
Steps Parameters
| Parameters | Description |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | --- |
| title | (required) the title as a string or React element. |
| is_current | (optional) if set to true, this item step will be set as the current current selected step. This can be used instead of current_step on the component itself. |
| inactive | (optional) if set to true, this item step will be handled as an inactive step and will not be clickable. Defaults to false. |
| disabled | (optional) if set to true, this item step will be visible as an disabled button and will not be clickable. Defaults to false. |
| status | (optional) a status text. |
| status_state | (optional) In case the status state should be info or error. Defaults to warn. |
| on_render | (optional) callback function to manipulate or wrap a certain item. Has to return a React Node. |
| on_click | (optional) event function that gets invoked once the users clicks on the active item. | | |
Steps example
const steps = [{ title: 'Active' },{ title: 'Active and marked as current', is_current: true },{ title: 'Not active', inactive: true },{ title: 'Disabled', disabled: true },{title: 'Active item with status text',status: 'Status text',status_state: 'warn', // defaults to warning},]