Enact

moonstone/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
Arranger

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

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

closeButtonBackgroundOpacity
String

The background-color opacity of the application close button; valid values are 'opaque', 'translucent', 'lightTranslucent', and 'transparent'.

Default: 'transparent'
id
String

Unique identifier for the Panels instance

index
Number

Index of the active panel

Default: 0
noAnimation
Boolean

When false, panel transitions are disabled

Default: false
noCloseButton
Boolean

When true, application close button does not show on the top right corner

Default: false
onApplicationClose
Function

A function to run when app close button is clicked

onBack
Function

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';

Vertical, transparent bar generally laid out horizontally used to navigate to a prior Panel.

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

Index of the panel for which this is the breadcrumb

onClick
Function

Called when the breadcrumb is clicked

onSelect
Function

Called when the breadcrumb is clicked

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

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

Configures the mode of uppercasing for the title.

See: i18n/Uppercase#casing
Default: 'upper'
children
String

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

When true, the header content is indented and the header lines are removed.

Default: false
marqueeOn
String

Determines what triggers the header content to start its animation. Valid values are 'focus', 'hover' and 'render'. The default is 'hover'.

Default: 'hover'
preserveCase ✘
Boolean

When true, the case of the title will remain unchanged. Uses Uppercase HOC and mirrors the preserveCase prop

replaced by casing

Default: false
subTitleBelow
String

Sub-title displayed at the bottom of the panel

title
String

Title of the header

titleBelow
String

Text displayed below the title

type
String

Set the type of header to be used. standard or compact.

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
String

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 ui/Slottable.Slottable API by using a Header component as a child of the Panel.

hideChildren
Boolean

When true, only the header is rendered and the body components are not. Setting to false 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 and false after animating into view.

Default: false
noAutoFocus ✘
Boolean

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
navigate •
Function

The event callback invoked when navigating back up the path

Properties added to wrapped component
navigate
Function

Decorates payload with path for index

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

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 moonstone/Panels.Panels

import {Router} from '@enact/moonstone/Panels';
Properties
component
StringFunction

The component wrapping the rendered path

Default: 'div'
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'])

routes
Object

Routes defined as an object rather than via JSX. If specified, routes will take precendence over a JSX definition.

ArrayBooleanFunctionModuleNumberObjectString