enact logoEnact
Edit on GitHub

sandstone/PopupTabLayout

Provides a floating component suitable for grouping collections of managed views.

import PopupTabLayout from '@enact/sandstone/PopupTabLayout';

Members

PopupTabLayoutComponent

An instance of Popup which restricts the TabLayout content to the left side of the screen. The content of TabLayout can flex vertically, but not horizontally (fixed width). This is typically used to switch between several collections of managed views (TabPanels and TabPanel, also exported from this module).

Example:

	<PopupTabLayout>
		<Tab title="Tab One">
			<TabPanels>
				<TabPanel>
					<Header title="First Panel" type="compact" />
					<Item>Item 1 in Panel 1</Item>
					<Item>Item 2 in Panel 1</Item>
				</TabPanel>
				<TabPanel>
					<Header title="Second Panel" type="compact" />
					<Item>Item 1 in Panel 2</Item>
					<Item>Item 2 in Panel 2</Item>
				</TabPanel>
			</TabPanels>
		</Tab>
		<Tab title="Tab Two">
			<Item>Goodbye</Item>
		</Tab>
	</PopupTabLayout>
import PopupTabLayout from '@enact/sandstone/PopupTabLayout';
Statics
Tab
sandstone/PopupTabLayout.Tab

A shortcut to access sandstone/PopupTabLayout.Tab

PopupTabLayoutBaseComponent

Tabbed Layout component in a floating Popup.

import {PopupTabLayoutBase} from '@enact/sandstone/PopupTabLayout';
Properties
children
Node

Collection of Tabs to render.

collapsed
Boolean

Collapses the vertical tab list into icons only.

Only applies to orientation="vertical". If the tabs do not include icons, a single collapsed icon will be shown.

index
Number

The currently selected tab.

noAnimation
Boolean

Disables transition animation.

onCollapse
Function

Called when the tabs are collapsed.

onExpand
Function

Called when the tabs are expanded.

onHide
Function

Called after the popup's "hide" transition finishes.

onSelect
Function

Called when a tab is selected

onShow
Function

Called after the popup's "show" transition finishes.

onTabAnimationEnd
Function

Called when the tab collapse or expand animation completes.

Event payload includes:

  • type - Always set to "onTabAnimationEnd"

  • collapsed - true when the tabs are collapsed

open
Boolean

Controls the visibility of the Popup.

By default, the Popup and its contents are not rendered until open.

scrimType
'transparent''translucent''none'

Scrim type.

  • Values: 'transparent', 'translucent', or 'none'.

'none' is not compatible with spotlightRestrict of 'self-only', use a transparent scrim to prevent mouse focus when using popup.

Default: 'translucent'
spotlightId
String

The container id for Spotlight container.

spotlightRestrict
'none''self-first''self-only'

Restricts or prioritizes navigation when focus attempts to leave the popup.

It can be either 'none', 'self-first', or 'self-only'.

Note: The ready-to-use Popup component only supports 'self-first' and 'self-only'.

PopupTabLayoutDecoratorHigher-Order Component

Add behaviors to PopupTabLayout.

import {PopupTabLayoutDecorator} from '@enact/sandstone/PopupTabLayout';

TabComponent

A Tab for use inside this component.

import {Tab} from '@enact/sandstone/PopupTabLayout';

TabPanelComponent

A customized version of Panel for use inside this component.

import {TabPanel} from '@enact/sandstone/PopupTabLayout';

TabPanelsComponent

A customized version of Panels for use inside this component.

import {TabPanels} from '@enact/sandstone/PopupTabLayout';
Properties
noCloseButton
Boolean

Omits the close button.

Unlike most components, this prop defaults to true. To show the close button, the prop must explicitly set it to false:

<TabPanels noCloseButton={false} />
Default: true

TabPanelsBaseComponent

A base component for TabPanels which has left key handler to navigate panels.

import {TabPanelsBase} from '@enact/sandstone/PopupTabLayout';
ArrayBooleanFunctionModuleNumberObjectString