limestone/Panels

Panels provides a way to manage different screens of an app.

Import Usage

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

Members

Panels   Component

Basic Panels component without a default ui/ViewManagerui/ViewManager.Arranger

Import Usage

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

Properties

arranger

ui/ViewManager.Arranger

Set of functions that control how the panels are transitioned into and out of the viewport.

Default: ui/ViewManager.SlideLeftArranger

See: ui/ViewManagerui/ViewManager.SlideArranger

---

backButtonAriaLabel

String

Hint string read when focusing the back button.

Default: 'go to previous'

---

backButtonBackgroundOpacity

'opaque''transparent'

Background opacity of the application back button.

Default: 'transparent'

---

children

Node

limestone/Panelslimestone/Panels.Panel to be rendered

---

closeButtonAriaLabel

String

Hint string read when focusing the application close button.

Default: 'Exit app'

---

closeButtonBackgroundOpacity

'opaque''transparent'

Background opacity of the application close button.

Default: 'transparent'

---

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:

• panels - The root class name

• viewport - The node containing the panel instances

---

id

String

Unique identifier for the Panels instance.

When defined, Panels will manage the presentation state of Panel instances in order to restore it when returning to the Panel. See limestone/Panelslimestone/Panels.Panels.noSharedState for more details on shared state.

---

index

Number

Index of the active panel

Default: 0

---

noAnimation

Boolean

Disables panel transitions.

Default: false

---

noBackButton

Boolean

Omits the back button.

Default: false

---

noCloseButton

Boolean

Omits the close button.

Default: false

---

noSharedState

Boolean

Prevents maintaining shared state for framework components within this Panels instance.

When false, each Panel will track the state of some framework components in order to restore that state when the Panel is recreated. For example, the scroll position of a limestone/Scroller within a Panel will be saved and restored when returning to that Panel.

This only applied when navigating "back" (to a lower index) to Panel. When navigating "forwards" (to a higher index), the Panel and its contained components will use their default state.

Default: false

---

onBack

Function

Called with cancel/back key events.

---

onClose

Function

Called when the app close button is clicked.

---

onTransition

Function

Called once when all panels have completed their transition.

---

onWillTransition

Function

Called once before panels begin their transition.

Header   Component

A header component for a Panel with a title and subtitle, supporting several configurable ui/Slottableui/Slottable.Slottable for components.

Import Usage

import {Header} from '@enact/limestone/Panels';

Properties

backButtonAriaLabel

String

Sets the hint string read when focusing the back button.

Default: 'go to previous'

---

backButtonBackgroundOpacity

'opaque''transparent'

Background opacity of the application back button.

Default: 'transparent'

---

centered

Boolean

Centers the contents of the Header.

This setting does not affect slotBefore or slotAfter.

Default: false

---

children

ElementArray(Element)

Children provided are added to the header-components area.

A space for controls which live in the header, apart from the body of the panel view.

---

closeButtonAriaLabel

String

Hint string read when focusing the application close button.

Default: 'Exit app'

---

closeButtonBackgroundOpacity

'opaque''transparent'

Background opacity of the application close button.

Default: 'transparent'

---

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:

• header - The root class name

---

marqueeOn

'focus''hover''render'

Determines what triggers the header content to start its animation.

Default: 'render'

---

noBackButton

Boolean

Omits the back button.

Default: false

---

noCloseButton

Boolean

Omits the close button.

Default: false

---

noSubtitle

Boolean

Omits the subtitle area.

Default: false

---

onBack

Function

Called with cancel/back key events.

---

onClose

Function

Called when the app close button is clicked.

---

shadowed

Boolean

Adds shadow to the text contents.

---

slotAbove

Node

A location for arbitrary elements to be placed above the title

This is a ui/Slottableui/Slottable.Slottable, so it can be used as a tag-name inside this component.

<Header>
	<slotAbove><Button /></slotAbove>
	<title>My Title</title>
</Header>

---

slotAfter

Node

A location for arbitrary elements to be placed to the right the title in LTR locales and to the left in RTL locales

This is a ui/Slottableui/Slottable.Slottable, so it can be used as a tag-name inside this component.

<Header>
	<title>My Title</title>
	<slotAfter><Button /></slotAfter>
</Header>

---

slotBefore

Node

A location for arbitrary elements to be placed to the left the title in LTR locales and to the right in RTL locales

This is a ui/Slottableui/Slottable.Slottable, so it can be used as a tag-name inside this component.

<Header>
	<slotBefore><Button /></slotBefore>
	<title>My Title</title>
</Header>

---

subtitle

StringArray(String)

Text displayed below the title.

This is a ui/Slottableui/Slottable.Slottable, so it can be used as a tag-name inside this component. If limestone/Panelslimestone/Panels.Header.noSubtitle is true, this prop is ignored.

---

title

StringArray(String)

Title of the header.

This is a ui/Slottableui/Slottable.Slottable, so it can be used as a tag-name inside this component.

Example:

 <Header>
 	<title>Example Header Title</title>
 	<subtitle>The Adventure Continues</subtitle>
 </Header>

---

type

'compact''mini''standard''wizard'

Set the type of header to be used.

Default: 'standard'

Panel   Component

A Panel is the standard view container used inside a limestone/Panelslimestone/Panels.Panels view manager instance.

limestone/Panelslimestone/Panels.Panels will typically contain several instances of these and transition between them.

Import Usage

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

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.

---

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:

• panel - The root class name

• body - The node containing the panel's children

---

header

Header

Header for the panel.

This is usually passed by the ui/Slottableui/Slottable.Slottable API by using a limestone/Panelslimestone/Panels.Header component as a child of the Panel.

---

hideChildren

Boolean

Hides the body components.

When a Panel is used within limestone/Panelslimestone/Panels.Panels this property will be set automatically to true on render and false after animating into view.

Default: false

---

autoFocus

'default-element''last-focused''none'String

Sets the strategy used to automatically focus an element within the panel upon render.

• "none" - Automatic focus is disabled

• "last-focused" - The element last focused in the panel with be restored

• "default-element" - The first spottable component within the body will be focused

• Custom Selector - A custom CSS selector may also be provided which will be used to find the target within the Panel

When used within limestone/Panelslimestone/Panels.Panels, this prop may be set by Panels to "default-element" when navigating "forward" to a higher index. This behavior may be overridden by setting autoFocus on the Panel instance as a child of Panels or by wrapping Panel with a custom component and overriding the value passed by Panels.

// Panel within CustomPanel will always receive "last-focused"
const CustomPanel = (props) => <Panel {...props} autoFocus="last-focused" />;

// The first panel will always receive "last-focused". The second panel will receive
// "default-element" when navigating from the first panel but `autoFocus` will be unset
// when navigating from the third panel and as a result will default to "last-focused".
const MyPanels = () => (
  <Panels>
    <Panel autoFocus="last-focused" />
    <Panel />
    <Panel />
  </Panels>
);

Default: 'last-focused'

---

noSharedState

Boolean

Prevents the component from restoring any framework shared state.

When false, the default, Panel will store state for some framework components in order to restore that state when returning to the Panel. Setting this prop to true will suppress that behavior and not store or retrieve any framework component state.

Default: false

---

spotlightId

String

The container id for spotlight/SpotlightContainerDecorator/#SpotlightContainerDecoratorspotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId.

When the Panel is used within limestone/Panelslimestone/Panels.Panels, this prop will be generated by Panels. When using the panel alone, you need to specify this prop for restoring focus.

PanelDecorator   Higher-Order Component

Applies Limestone specific behaviors to limestone/Panelslimestone/Panels.Panel.PanelBase components.

Import Usage

import {PanelDecorator} from '@enact/limestone/Panels';

Includes: spotlight/SpotlightContainerDecoratorspotlight/SpotlightContainerDecorator.SpotlightContainerDecorator
Includes: ui/Slottableui/Slottable.Slottable
Includes: limestone/Skinnablelimestone/Skinnable.Skinnable

Routable   Higher-Order Component

A higher-order component that provides support for mapping Routes as children of a component which are selected via path instead of the usual flat array.

Import Usage

import {Routable} from '@enact/limestone/Panels';

Route   Component

Used with limestone/Panelslimestone/Panels.Routable to define the path segment and the component to render.

Import Usage

import {Route} from '@enact/limestone/Panels';

Extends: ui/Routableui/Routable.Route