limestone/QuickGuidePanels

Provides a Limestone styled panels component for full screen size content panel with steps.

Usage:

<QuickGuidePanels>
	<QuickGuidePanels.Panel aria-label="This is a description for panel">
		QuickGuidePanelsContent
	</QuickGuidePanels.Panel>
</QuickGuidePanels>

Import Usage

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

Members

QuickGuidePanels   Component

A QuickGuidePanels that can step through different panels. Expects limestone/QuickGuidePanelslimestone/QuickGuidePanels.Panel as children.

Import Usage

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

Extends: limestone/QuickGuidePanelslimestone/QuickGuidePanels.QuickGuidePanelsBase
Wrapped with: ui/Changeableui/Changeable.Changeable

Properties

onBack

Function

Called when the back button is pressed.

If ev.preventDefault is called, QuickGuidePanels 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 for limestone/QuickGuidePanelslimestone/QuickGuidePanels.QuickGuidePanels.

Import Usage

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

Properties

aria-label

String

The aria-label for the Panel.

Example:

<QuickGuidePanels.Panel aria-label="This is a description for panel">

---

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/QuickGuidePanelslimestone/QuickGuidePanels.QuickGuidePanelsBase.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/QuickGuidePanelslimestone/QuickGuidePanels.QuickGuidePanelsBase.prevButtonVisibility.

Example:

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

QuickGuidePanelsBase   Component

A QuickGuidePanels that has steps with corresponding panels and panels have full screen size content.

Import Usage

import {QuickGuidePanelsBase} from '@enact/limestone/QuickGuidePanels';

Properties

closeButtonAriaLabel

String

Hint string read when focusing the close button.

Default: 'Exit Quick Guide'

---

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.

---

nextButtonVisibility

'auto''always''never'

Specifies when and how to show nextButton on QuickGuidePanel.

• 'auto' will display the nextButton on every QuickGuidePanels.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 QuickGuidePanels.Panel will take precedence over the nextButtonVisibility value.

Default: 'auto'

---

onChange

Function

Called when the index value is changed.

---

onClose

Function

Called when the close button is clicked.

---

onNextClick

Function

Called when the next button is clicked in QuickGuidePanel.

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

---

onPrevClick

Function

Called when previous button is clicked in QuickGuidePanel.

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 QuickGuidePanel.

• 'auto' will display the prevButton on every QuickGuidePanels.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 QuickGuidePanels.Panel will take precedence over the prevButtonVisibility value.

Default: 'auto'

---

total

Number

The total number of steps.

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