sandstone/TabLayout

Provides a Sandstone-themed TabLayout.

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

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

children: Collection of Tabs to render.
collapsed: 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: 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: The currently selected tab.
Default: 0
onCollapse: Called when the tabs are collapsed.
onExpand: Called when the tabs are expanded.
onSelect: Called when a tab is selected
onTabAnimationEnd: 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: Orientation of the tabs.
Default: 'vertical'
tabSize: 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.

An item for the TabLayout.

Configures the tab title and icon.

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

tabKey •: 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 •: Title of the tab.
children: The contents to show when the tab is selected.
icon: The icon content of the tab.
See: ui/Icon.Icon.children
onTabClick: Called when a tab is clicked.
sprite: 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.
See: sandstone/Sprite.Sprite

Variable Types Key:ArrayBooleanFunctionModuleNumberObjectString