limestone/WizardPanels

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

Import Usage

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

Members

WizardPanels   Component

A WizardPanels that can step through different panels. Expects limestone/WizardPanelslimestone/WizardPanels.Panel as children.

Import Usage

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

Extends: limestone/WizardPanelslimestone/WizardPanels.WizardPanelsBase
Wrapped with: ui/Changeableui/Changeable.Changeable

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.

Panel   Component

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

Import Usage

import {Panel} from '@enact/limestone/WizardPanels';

Properties

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 limestone/WizardPanelslimestone/WizardPanels.WizardPanelsBase.nextButtonVisibility.

Example:

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

---

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 limestone/WizardPanelslimestone/WizardPanels.WizardPanelsBase.prevButtonVisibility.

Example:

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

WizardPanelsBase   Component

A WizardPanels that has steps with corresponding panels.

Import Usage

import {WizardPanelsBase} from '@enact/limestone/WizardPanels';

Properties

aria-label

String

The "aria-label" for the Panel.

By default, the panel will be labeled by its limestone/Panelslimestone/Panels.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

ElementArray(Element)

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 WizardPanels.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 WizardPanels.Panel will take precedence over the nextButtonVisibility value.

Default: 'auto'

---

noAnimation

Boolean

Disables panel transitions.

---

noSteps

Boolean

Omits the steps component.

---

noSubtitle

Boolean

Omits the subtitle area.

Default: false

---

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 WizardPanels.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 WizardPanels.Panel will take precedence over the prevButtonVisibility value.

Default: 'auto'

---

subtitle

String

The subtitle to display.

If limestone/WizardPanelslimestone/WizardPanels.WizardPanelsBase.noSubtitle is true, this prop is ignored.

---

title

String

The title to display.

---

total

Number

The total number of steps.

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