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. |
overview_title | (optional) The title shown inside the <StepIndicatorModal /> supplemental screen reader text for the <StepIndicatorTriggerButton />. Defaults to Steps Overview |
step_title | (optional) Label for <StepIndicatorTriggerButton /> and screen reader text for <StepIndicatorItem />. Must contain %step and %count to interpolate current_step and stepCount into the text. Defaults to Step %step of %count |
step_title_extended | (optional) Descriptive label for <StepIndicatorModal />. Must contain %step and %count to interpolate current_step and stepCount into the text. Defaults toYou are on step %step of %count |
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 }. |
on_click | (optional) Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object { event, item, current_step, currentStep }. |
on_change | (optional) Will be called once the user visits actively a new step. Will be emitted only once. Returns an object { event, item, current_step, currentStep }. |
| 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) Is used to set the 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. Receives parameters { StepItem, element, attributes, props, context } |
on_click | (optional) event function that gets invoked once the users clicks on the active item. Receives parameters { event, item, current_step, currentStep } |
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},]
Translations
More info about translations can be found in the general localization and Eufemia Forms localization docs.
| Key | nb-NO | en-GB | en-US |
|---|---|---|---|
StepIndicator.overview_title | Stegoversikt | Steps Overview | Steps Overview |
StepIndicator.step_title_extended | Du er på steg %step av %count | You are on step %step of %count | You are on step %step of %count |
StepIndicator.step_title | Steg %step av %count | Step %step of %count | Step %step of %count |