moonstone/ Panels
Exports the moonstone/Panels.Panels, moonstone/Panels.Panel, moonstone/Panels.ActivityPanels, moonstone/Panels.AlwaysViewingPanels, moonstone/Panels.Breadcrumb, moonstone/Panels.Header components. It also exports the moonstone/Panels.Routable HOC and moonstone/Panels.Route function. The default export is moonstone/Panels.Panels.
import Panels from '@enact/moonstone/Panels';
Members
PanelsComponent
Basic Panels component without breadcrumbs or default arranger
import Panels from '@enact/moonstone/Panels';
Properties
- arranger
Set of functions that control how the panels are transitioned into and out of the viewport
- childProps
An object containing properties to be passed to each child.
aria-owns
will be added or updated to this object to add the close button to the accessibility tree of each panel.- children
Panels to be rendered
- closeButtonBackgroundOpacity
The background-color opacity of the application close button; valid values are
'opaque'
,'translucent'
,'lightTranslucent'
, and'transparent'
.Default: 'transparent'- id
Unique identifier for the Panels instance
- index
Index of the active panel
Default: 0- noAnimation
When
false
, panel transitions are disabledDefault: false- noCloseButton
When
true
, application close button does not show on the top right cornerDefault: false- onApplicationClose
A function to run when app close button is clicked
- onBack
Callback to handle cancel/back key events
ActivityPanelsComponent
An instance of Panels in which the Panel uses the entire viewable screen with a single breadcrumb for the previous panel when viewing any panel beyond the first.
Note ActivityPanels requires that the data-index
property that all panels variations add to
its children be applied to the root DOM node of each child in order to manage layout correctly.
It is recommended that you spread any extra props on the root node but you may also handle this
property explicitly if necessary.
import {ActivityPanels} from '@enact/moonstone/Panels';
AlwaysViewingPanelsComponent
An instance of Panels in which the Panel uses the right half of the viewable screen with breadcrumbs to the left for any panels prior to the active panel.
import {AlwaysViewingPanels} from '@enact/moonstone/Panels';
BreadcrumbComponent
Vertical, transparent bar generally laid out horizontally used to navigate to a prior Panel.
import {Breadcrumb} from '@enact/moonstone/Panels';
Properties
- index
Index of the panel for which this is the breadcrumb
- onClick
Called when the breadcrumb is clicked
- onSelect
Called when the breadcrumb is clicked
HeaderComponent
A visual header component for a Panel with a title, titleAbove, titleBelow, and subTitleBelow
import {Header} from '@enact/moonstone/Panels';
Properties
- casing
Configures the mode of uppercasing for the title.
Default: 'upper'- children
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.
- fullBleed
When
true
, the header content is indented and the header lines are removed.Default: false- marqueeOn
Determines what triggers the header content to start its animation. Valid values are
'focus'
,'hover'
and'render'
. The default is'hover'
.Default: 'hover'- preserveCase ✘
When true, the case of the title will remain unchanged. Uses Uppercase HOC and mirrors the preserveCase prop
replaced by
casing
Default: false- subTitleBelow
Sub-title displayed at the bottom of the panel
- title
Title of the header
- titleBelow
Text displayed below the title
- type
Set the type of header to be used.
standard
orcompact
.Default: 'standard'
PanelComponent
moonstone/Panels.Panel is the default kind for controls created inside a
moonstone/Panels container. A moonstone/Panels
will typically contain several instances of these.
import {Panel} from '@enact/moonstone/Panels';
Properties
- aria-label
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.- autoFocus
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
Default: 'last-focused'- header
Header for the panel. This is usually passed by the ui/Slottable.Slottable API by using a Header component as a child of the Panel.
- hideChildren
When
true
, only theheader
is rendered and the body components are not. Setting tofalse
will cause all components to be rendered and the body components will fade in.When a Panel is used within moonstone/Panels.Panels, moonstone/Panels.ActivityPanels, or moonstone/Panels.AlwaysViewingPanels, this property will be set automatically to
true
on render andfalse
after animating into view.Default: false- noAutoFocus ✘
When
true
, the contents of the Panel will not receive spotlight focus after being rendered.Replaced by
autoFocus="none"
Default: false
RoutableHigher-Order Component
Adds support for Routes as children of Panels which are selected via path
instead of the usual
flat array of Panels. When using Routable
you must specify the navigate
config option.
import {Routable} from '@enact/moonstone/Panels';
Configuration
Properties added to wrapped component
- path
Path to the active panel
May either be a URI-style path (
'/app/home/settings'
) or an array of strings (['app', 'home', 'settings']
)
RouteClass
Used with moonstone/Panels.Routable to define the path
segment and the
component
to render. Route
elements can be nested to build multiple level paths.
In the below example, Panels
would render SettingsPanel
with breadcrumbs to
navigate AppPanel
and HomePanel
.
<Panels path="/app/home/settings" onSelectBreadcrumb={this.handleNavigate}>
<Route path="app" component={AppPanel}>
<Route path="home" component={HomePanel}>
<Route path="settings" component={SettingsPanel} />
</Route>
</Route>
<Route path="admin" component={AdminPanel} />
<Route path="help" component={HelpPanel} />
</Panels>
import {Route} from '@enact/moonstone/Panels';
Properties
- component
The component to render when the
path
for this Route matches the path of the moonstone/Panels.Routable container.- path
The name of the path segment
RouterComponent
A Router component for use with moonstone/Panels.Panels
import {Router} from '@enact/moonstone/Panels';
Properties
- component
The component wrapping the rendered path
Default: 'div'- path
List of views to render. Will be rendered as a flat array of views suitable for use in Panels and not a hierarchy of views as the path implies.
May either be a URI-style path (
'/app/home/settings'
) or an array of strings (['app', 'home', 'settings']
)- routes
Routes defined as an object rather than via JSX. If specified,
routes
will take precendence over a JSX definition.