enact logoEnact
Edit on GitHub

sandstone/Steps

Provides Sandstone styled component to indicate progress along a continuum.

In the following example, 6 total steps will be displayed with the current step being the 3rd step, having passed the previous 2 steps, with 3 more to go.

import Steps from '@enact/sandstone/Steps';

Members

StepsComponent

A full-featured Sandstone-styled step component.

import Steps from '@enact/sandstone/Steps';

StepsBaseComponent

Renders a sandstone-styled steps component only basic behavior.

import {StepsBase} from '@enact/sandstone/Steps';
Properties
css
Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

  • steps - The root class name

  • step - Applied to each individual step

  • numbers - Applied on the steps designated as "numbers" special case (See: Icon related props below)

  • past - Applied to the steps preceding the current step

  • current - Applied to the current step

  • future - Applied to the steps following the current step

When providing a custom iconComponent it will receive the classes: 'step' (always), 'numbers' (conditionally, based on the "numbers" value), and one of the following three, based on the current step: 'past', 'current', and 'future'.

current
Number

Indicate the current step.

This is 1-based, not 0-based; as in the first step is 1.

Default: 1
currentIcon
String

The icon to use for indicating the current step.

This accepts any icon supported by sandstone/Icon, in addition to a special value: "numbers", which instead of a standard icon, shows the number of the step.

Default: 'numbers'
futureIcon
String

The icon to use for indicating all steps following the current step.

This accepts any icon supported by sandstone/Icon, in addition to a special value: "numbers", which instead of a standard icon, shows the number of the step.

Default: 'numbers'
iconComponent
Component

Defines a custom element to use as the icon component.

Use the css prop and public class name override system to target the classes applied to this component. This component will be repeated total number of times and will also receive the children and size props.

Default: sandstone/Icon.Icon
pastIcon
String

The icon to use for indicating all steps preceding the current step.

This accepts any icon supported by sandstone/Icon, in addition to a special value: "numbers", which instead of a standard icon, shows the number of the step.

Default: 'check'
size
'large''medium''small''tiny'

The size of the step icons.

This accepts any size supported by sandstone/Icon.

Default: 'small'
skip
NumberArrayNumber

Indicate which steps to skip.

A number or array of step numbers is acceptable.

skipIcon
String

The icon to use for any skipped steps, past or future.

This accepts any icon supported by sandstone/Icon.

The current step will always show the currentIcon regardless of whether it has been skipped. It's the developer's responsibility to not set current to a skipped step.

Default: 'minus'
total
Number

Indicate the total number of steps.

Default: 2

StepsDecoratorHigher-Order Component

Sandstone-specific behaviors to apply to StepsBase.

import {StepsDecorator} from '@enact/sandstone/Steps';
ArrayBooleanFunctionModuleNumberObjectString