sandstone/TabLayout

Provides a Sandstone-themed TabLayout.

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

Members

TabLayoutComponent

Tabbed Layout component.

Example:

	<TabLayout>
		<Tab title="Tab One">
			<Item>Hello</Item>
		</Tab>
		<Tab title="Tab Two">
			<Item>Goodbye</Item>
		</Tab>
	</TabLayout>
import TabLayout from '@enact/sandstone/TabLayout';
Statics
Tab

A shortcut to access sandstone/TabLayout.Tab

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.

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
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.

Horizontal tabs support a maximum of six tabs.

Default: 'vertical'
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.

TabComponent

An item for the TabLayout.

Configures the tab title and icon.

import {Tab} from '@enact/sandstone/TabLayout';
Properties
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.

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.

onTabClick
Function

Called when a tab is clicked.

sprite
Object

Configuration props for a Sprite icon.

All props on 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.

ArrayBooleanFunctionModuleNumberObjectString