limestone/TabLayout

Provides a Limestone-themed TabLayout.

Import Usage

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

Members

TabLayout   Component

Tabbed Layout component.

Example:

	<TabLayout>
		<Tab title="Tab One">
			<Item>Hello</Item>
		</Tab>
		<Tab title="Tab Two">
			<Item>Goodbye</Item>
		</Tab>
	</TabLayout>

Import Usage

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

Properties

blockCollapseOnPortrait

Boolean

Prevents the tab list from automatically collapsing when the screen orientation changes to portrait mode.

Only applies to `orientation="vertical".

---

blockExpandOnLandscape

Boolean

Prevents the tab list from automatically expand when the screen orientation changes to landscape mode.

Only applies to `orientation="vertical".

---

children

Node

Collection of limestone/TabLayoutlimestone/TabLayout.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.

---

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

---

index

Number

The currently selected tab.

Default: 0

---

offset

Number

The offset of the tabs area from the left and right edges of the screen. This option is only applicable when orientation is set to horizontal. The default value set to 36 to have the right position of the tabs in the normal panel. If the tabs are supposed to scroll, this value should be set to 132 and the panel should have no padding.

Default: 36

---

onCollapse

Function

Called when the tabs are collapsed.

---

onExpand

Function

Called when the tabs are expanded.

---

onSelect

Function

Called when a tab is selected

---

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

---

orientation

'horizontal''vertical'

Orientation of the tabs.

Default: 'vertical'

---

primaryIndex

Number

The index of the primary tab. When this prop is set, the initial focus will be on the primary tab when rendered. Also, when pressing the back key from other tabs, the focus will be moved to the primary tab. If the primaryIndex is not provided, the initial focus will default to the first tab during the initial render.

Default: null

---

size

'small''large'

The size of the horizontal tab.

Default: 'large'

---

tabSize

Number

Assign a custom size to horizontal tabs.

Tabs in the horizontal orientation automatically stretch to fill the available width. Leave this prop blank to use the default auto-sizing behavior. Tabs may also be set to a finite width using this property. This accepts numeric pixel values. Be mindful of the value you provide as values that are too wide will run off the edge of the screen.

Only applies to orientation="horizontal" at this time.

Tab   Component

An item for the TabLayout.

Configures the tab title and icon.

Import Usage

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

Properties

Required Property •  title

String

Title of the tab.

---

children

Node

The contents to show when the tab is selected.

---

icon

StringObject

The icon content of the tab.

See: ui/Iconui/Icon.IconBase.children

---

onTabClick

Function

Called when a tab is clicked.

---

sprite

Object

Configuration props for a limestone/Spritelimestone/Sprite.Sprite icon.

All props on limestone/Spritelimestone/Sprite.Sprite are supported here. By default, stopped will be set to false when the tab is focused and true otherwise. To override, pass stopped in this object.

See: limestone/Spritelimestone/Sprite.Sprite

---

Required Property •  tabKey

StringNumber

Key for the tab.

Note: TabLayout automatically generates a key based on the title and icon combination. If this combination is not unique for all items, tabKey must be specified to make each tab have a unique (and persistent) key.