sandstone/ Panels
Panels provides a way to manage different screens of an app.
import Panels from '@enact/sandstone/Panels';
Members
PanelsComponent
Basic Panels component without a default arranger
import Panels from '@enact/sandstone/Panels';
Properties
Set of functions that control how the panels are transitioned into and out of the viewport.
Default: ui/ViewManager.SlideLeftArrangerHint string read when focusing the back button.
Default: 'go to previous'Background opacity of the application back button.
Default: 'transparent'Panel to be rendered
Hint string read when focusing the application close button.
Default: 'Exit app'Background opacity of the application close button.
Default: 'transparent'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 nameviewport
- The node containing the panel instances
Unique identifier for the Panels instance.
When defined,
Panels
will manage the presentation state ofPanel
instances in order to restore it when returning to thePanel
. See noSharedState for more details on shared state.Index of the active panel
Default: 0Disables panel transitions.
Default: falseOmits the back button.
Default: falseOmits the close button.
Default: falseCalled with cancel/back key events.
Called when the app close button is clicked.
Called once when all panels have completed their transition.
Called once before panels begin their transition.
HeaderComponent
A header component for a Panel with a title
and subtitle
, supporting several configurable
slots for components.
import {Header} from '@enact/sandstone/Panels';
Properties
Sets the hint string read when focusing the back button.
Default: 'go to previous'Background opacity of the application back button.
Default: 'transparent'Centers the contents of the Header.
This setting does not affect
slotBefore
orslotAfter
.Default: falseChildren 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.
Hint string read when focusing the application close button.
Default: 'Exit app'Background opacity of the application close button.
Default: 'transparent'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
Determines what triggers the header content to start its animation.
Default: 'hover'Omits the back button.
Default: falseOmits the close button.
Default: falseCalled with cancel/back key events.
Called when the app close button is clicked.
Called when the user leaves the header to hide the back button.
Called when the user enters the header to show the back button.
A location for arbitrary elements to be placed above the title
This is a slot, so it can be used as a tag-name inside this component.
<Header> <slotAbove><Button /></slotAbove> <title>My Title</title> </Header>
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 slot, so it can be used as a tag-name inside this component.
<Header> <title>My Title</title> <slotAfter><Button /></slotAfter> </Header>
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 slot, so it can be used as a tag-name inside this component.
<Header> <slotBefore><Button /></slotBefore> <title>My Title</title> </Header>
Text displayed below the title.
This is a slot, so it can be used as a tag-name inside this component.
Title of the header.
This is a slot, 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>
Set the type of header to be used.
Default: 'standard'
PanelComponent
import {Panel} from '@enact/sandstone/Panels';
Properties
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 Panels, this prop may be set by
Panels
to "default-element" when navigating "forward" to a higher index. This behavior may be overridden by settingautoFocus
on thePanel
instance as a child ofPanels
or by wrappingPanel
with a custom component and overriding the value passed byPanels
.// 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'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.Obtains a reference to the root node.
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 namebody
- The node containing the panel's children
Header for the panel.
This is usually passed by the Slottable API by using a Header component as a child of the Panel.
Hides the body components.
When a Panel is used within Panels this property will be set automatically to
true
on render andfalse
after animating into view.Default: false
RoutableHigher-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 {Routable} from '@enact/sandstone/Panels';
RouteComponent
Used with sandstone/Panels.Routable to define the path
segment and the
component
to render.
import {Route} from '@enact/sandstone/Panels';