limestone/PopupTabLayout

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

Import Usage

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

Members

PopupTabLayout   Component

An instance of limestone/Popuplimestone/Popup.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 Usage

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

PopupTabLayoutBase   Component

Tabbed Layout component in a floating Popup.

Import Usage

import {PopupTabLayoutBase} from '@enact/limestone/PopupTabLayout';

Extends: limestone/Popuplimestone/Popup.Popup
Extends: limestone/TabLayoutlimestone/TabLayout.TabLayout

Properties

children

Node

Collection of limestone/PopupTabLayoutlimestone/PopupTabLayout.Tab 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/SpotlightContainerDecorator/#SpotlightContainerDecoratorspotlight/SpotlightContainerDecorator/#SpotlightContainerDecorator.spotlightId.

---

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 limestone/Popuplimestone/Popup.Popup component only supports 'self-first' and 'self-only'.

PopupTabLayoutDecorator   Higher-Order Component

Add behaviors to PopupTabLayout.

Import Usage

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

Includes: limestone/Skinnablelimestone/Skinnable.Skinnable

Tab   Component

A Tab for use inside this component.

Import Usage

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

Extends: limestone/TabLayoutlimestone/TabLayout.Tab

TabPanel   Component

A customized version of Panel for use inside this component.

Import Usage

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

Extends: limestone/Panelslimestone/Panels.Panel

TabPanels   Component

A customized version of Panels for use inside this component.

Import Usage

import {TabPanels} from '@enact/limestone/PopupTabLayout';

Extends: limestone/PopupTabLayoutlimestone/PopupTabLayout.TabPanelsBase

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

TabPanelsBase   Component

A base component for limestone/PopupTabLayoutlimestone/PopupTabLayout.TabPanels which has left key handler to navigate panels.

Import Usage

import {TabPanelsBase} from '@enact/limestone/PopupTabLayout';

Extends: limestone/Panelslimestone/Panels.Panels