sandstone/WizardPanels

Provides a Sandstone styled panels component for stepping through a process.

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

Members

WizardPanelsComponent

A WizardPanels that can step through different panels. Expects WizardPanel as children.

import WizardPanels from '@enact/sandstone/WizardPanels';
Statics
Panel

A shortcut to access sandstone/WizardPanels.Panel

Properties
onBack
Function

Called when the back button is pressed.

If ev.preventDefault is called, WizardPanels will not process the event further. If it is not called, the index of the panel will be decremented unless noPrevButton is set.

PanelComponent

Panel that sets the children, footer, subtitle, and title for WizardPanels.

import {Panel} from '@enact/sandstone/WizardPanels';
Properties
PrevButton
BooleanComponent

The button to use in place of the standard prev button.

This prop accepts a component (e.g. Button), a component instance or a boolean value.

If false, the button will not show. If set to a component, or true, the button will show. This will override the setting of prevButtonVisibility.

Example:

prevButton={<Button icon="closex" aria-label="Back">Back</Button>}
nextButton
BooleanComponent

The button to use in place of the standard next button.

This prop accepts a component (e.g. Button), a component instance or a boolean value.

If false, the button will not show. If set to a component, or true, the button will show. This will override the setting of nextButtonVisibility.

Example:

nextButton={<Button icon="closex" aria-label="Quit">Close</Button>}

WizardPanelsBaseComponent

A WizardPanels that has steps with corresponding panels.

import {WizardPanelsBase} from '@enact/sandstone/WizardPanels';
Properties
aria-label
String

The "aria-label" for the Panel.

By default, the panel will be labeled by its Header. When aria-label is set, it will be used instead to provide an accessibility label for the panel.

componentRef
FunctionObject

Obtains a reference to the root node.

current
Number

The current step.

This is 1-based, not 0-based; as in the first step is 1. If omitted, this will equal the currently selected panel.

footer
ElementArrayElement

Components to be included under the primary content.

Typically, up to 2 buttons may be included.

nextButtonVisibility
'auto''always''never'

Specifies when and how to show nextButton on WizardPanel.

  • 'auto' will display the nextButton on every WizardPanel.Panel except the last

  • 'always' will always display the nextButton

  • 'never' will always hide the nextButton

Note, children values will override the generalized parent visibility settings. In this case, a customized nextButton on WizardPanel.Panel will take precedence over the nextButtonVisibility value.

Default: 'auto'
noAnimation
Boolean

Disables panel transitions.

noSteps
Boolean

Omits the steps component.

onChange
Function

Called when the index value is changed.

onNextClick
Function

Called when the next button is clicked in WizardPanel.

Calling preventDefault on the passed event will prevent advancing to the next panel.

onPrevClick
Function

Called when previous button is clicked in WizardPanel.

Calling preventDefault on the passed event will prevent navigation to the previous panel.

onTransition
Function

Called when a transition completes.

onWillTransition
Function

Called before a transition begins.

prevButtonVisibility
'auto''always''never'

Specifies when and how to show prevButton on WizardPanel.

  • 'auto' will display the prevButton on every WizardPanel.Panel except the first

  • 'always' will always display the prevButton

  • 'never' will always hide the prevButton

Note, children values will override the generalized parent visibility settings. In this case, if user provides a customized prevButton on WizardPanel.Panel will take precedence over the prevButtonVisibility value.

Default: 'auto'
subtitle
String

The subtitle to display.

title
String

The title to display.

total
Number

The total number of steps.

If omitted, this will equal the total number of Panels.

ArrayBooleanFunctionModuleNumberObjectString