limestone/Steps

Provides Limestone 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.

Loading Live Preview

Import Usage

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

Members

Steps   Component

A full-featured Limestone-styled step component.

Import Usage

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

Extends: limestone/Stepslimestone/Steps.StepsBase
Wrapped with: limestone/Stepslimestone/Steps.StepsDecorator

StepsBase   Component

Renders a limestone-styled steps component only basic behavior.

Import Usage

import {StepsBase} from '@enact/limestone/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 limestone/Iconlimestone/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 limestone/Iconlimestone/Icon, in addition to a special value: "numbers", which instead of a standard icon, shows the number of the step.

Default: 'numbers'

---

highlightCurrentOnly

Boolean

Defines how to represent the current step.

When true, highlight effect will be applied only to the current icon. When false, highlight effect will be applied to past and current icons.

---

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: limestone/Icon.Icon

---

pastIcon

String

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

This accepts any icon supported by limestone/Iconlimestone/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'Number

The size of the step icons.

This accepts any size supported by limestone/Iconlimestone/Icon.

Default: 'small'

---

skip

NumberArray(Number)

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 limestone/Iconlimestone/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

StepsDecorator   Higher-Order Component

Limestone-specific behaviors to apply to limestone/Stepslimestone/Steps.StepsBase.

Import Usage

import {StepsDecorator} from '@enact/limestone/Steps';

Includes: limestone/Skinnablelimestone/Skinnable.Skinnable