moonstone/Panels

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

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

Members

PanelsComponent

Basic Panels component without breadcrumbs or default arranger

import Panels from '@enact/moonstone/Panels';
Properties
arranger
Arranger

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

See: ui/ViewManager.SlideArranger
childProps
Object

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
Panel

Panels to be rendered

closeButtonAriaLabel
String

Sets the hint string read when focusing the application close button.

Default: 'Exit app'
closeButtonBackgroundOpacity
String

The background opacity of the application close button.

  • Values: 'translucent', 'lightTranslucent', 'transparent'

Default: 'transparent'
id
String

Unique identifier for the Panels instance

index
Number

Index of the active panel

Default: 0
noAnimation
Boolean

Disables panel transitions.

Default: false
noCloseButton
Boolean

Indicates the close button will not be rendered on the top right corner.

Default: false
onApplicationClose
Function

Called when the app close button is clicked.

onBack
Function

Called with 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 which restricts the Panel to the right half of the screen with the left half used for breadcrumbs that allow navigating to previous panels. Typically used for overlaying panels over a screen.

import {AlwaysViewingPanels} from '@enact/moonstone/Panels';

Vertical, transparent bar used to navigate to a prior Panel.

ActivityPanels has one breadcrumb, and AlwaysViewingPanels can have multiple stacked horizontally.

import {Breadcrumb} from '@enact/moonstone/Panels';
Properties

A header component for a Panel with a title, titleBelow, and subTitleBelow

See: i18n/Uppercase.Uppercase
import {Header} from '@enact/moonstone/Panels';
Properties
casing
String

Configures the mode of uppercasing for the title.

  • Values: 'upper', 'preserve', 'word', 'sentence'

See: i18n/Uppercase#Uppercase.casing
Default: 'upper'
children
ArrayElementElement

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
Boolean

Indents then content and removes separator lines.

Default: false
headerInput
Node

Input element that will replace the title.

This is also a slot, so it can be referred to as if it were JSX.

Example

 <Header>
 	<title>Example Header Title</title>
 	<headerInput>
 		<Input dismissOnEnter />
 	</headerInput>
 	<titleBelow>The Adventure Continues</titleBelow>
 	<subTitleBelow>The rebels face attack by imperial forces on the ice planet</subTitleBelow>
 </Header>
marqueeOn
String

Determines what triggers the header content to start its animation.

  • Values: 'focus', 'hover' and 'render'.

Default: 'hover'
subTitleBelow
String

Sub-title displayed at the bottom of the panel.

This is a slot, so it can be used as a tag-name inside this component.

title
String

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>
 	<titleBelow>The Adventure Continues</titleBelow>
 	<subTitleBelow>The rebels face attack by imperial forces on the ice planet</subTitleBelow>
 </Header>
titleBelow
String

Text displayed below the title.

This is a slot, so it can be used as a tag-name inside this component.

type
String

Set the type of header to be used.

  • Values: 'standard' or 'compact'.

Default: 'standard'

PanelComponent

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

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

import {Panel} from '@enact/moonstone/Panels';
Properties
aria-label
String

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.

autoFocus
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

Default: 'last-focused'
header
Header

Header for the panel.

This is usually passed by the Slottable API by using a Header component as a child of the Panel.

hideChildren
Boolean

Hides the body components.

When a Panel is used within Panels, ActivityPanels, or AlwaysViewingPanels, this property will be set automatically to true on render and false after animating into view.

Default: false

RoutableHigher-Order Component

A higher-order component that provides 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
navigate
String

The event to listen to for path changes.

This defines the actual name of the navigate property.

Properties added to wrapped component
path
ArrayStringString

Path to the active panel.

May either be a URI-style path ('/app/home/settings') or an array of strings (['app', 'home', 'settings']).

navigate
Function

Called when navigating.

The event object is decorated to add path.

NOTE: The actual name of this property is configured in the HOC config.

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
StringFunction

The component to render when the path for this Route matches the path of the moonstone/Panels.Routable container.

path
String

The name of the path segment

RouterComponent

A Router component for use with Panels

import {Router} from '@enact/moonstone/Panels';
Properties
path
ArrayStringString

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'])

component
Component

The component wrapping the rendered path

Default: 'div'
routes
Object

Routes defined as an object rather than via JSX.

If specified, routes will take precendence over a JSX definition.

const routes = {
  'first': {
    '$props': {
      'title': 'About Routable Panels Pattern'
    },
    '$component': AboutPanel,
    'second': {
      '$props': {
        'next': 'fourth',
        'title': 'Second'
      },
      '$component': MainPanel
    },
    'third': {
      '$props': {
        'next': 'first',
        'title': 'Third'
      },
      '$component': MainPanel,
      'fourth': {
        '$props': {
          'next': 'third',
          'title': 'Fourth'
        },
        '$component': MainPanel
      }
    }
  }
};

<Panels path="/app/home/settings" routes={routes} />
ArrayBooleanFunctionModuleNumberObjectString