Tabs
fun Tabs(tabList: List<TabItem>, selectedTabIndex: Int, modifier: Modifier = Modifier, variant: TabVariant = TabVariant.Emphasised, behaviour: TabsBehaviour = TabsBehaviour.Scrollable(), onItemSelected: (Int) -> Unit)(source)
Tabs Groups and allows navigation between groups of related content at the same level of the hierarchy, without leaving the page. Tabs can be used on full page layouts or nested in components.
Parameters
tabList
list of TabItem contain localized text, and other information of individual tabs.
selectedTabIndex
used to keep track of selected tab using its index.
modifier
Modifier to be applied to the Tabs.
variant
TabVariant to define the style of the tabs. Emphasised is default.
behaviour
TabsBehaviour to define the behaviour of the tabs. Scrollable is default.
onItemSelected
the callback that is triggered when on option is selected. Selected index comes as a parameter of the callback.
See also
Samples
SkapaTheme2(isSystemInDarkTheme()) {
// Create a mutable Int to remember the index state
var regularTabIndex by remember { mutableIntStateOf(0) }
Column {
Tabs(
tabList = listOf(
// Tab Item can be Text only or Text and Icon
TabItem.Text(title = "Tab number 1"),
TabItem.Text(title = "Tab number 2"),
TabItem.Text(title = "Tab number 3"),
// Individual tabs can be disabled
TabItem.Text(title = "Tab number 4", enabled = false),
TabItem.Text(title = "Tab number 5"),
TabItem.Text(title = "Tab number 6"),
TabItem.Text(title = "Tab number 7"),
TabItem.Text(title = "Tab number 8")
),
modifier = Modifier,
// Scrollable is set as default behaviour, allowing overflowing tabs and custom content edge padding
behaviour = TabsBehaviour.Scrollable(),
selectedTabIndex = regularTabIndex
) { index ->
// Update the selected item when tab clicked
regularTabIndex = index
}
var fluidTabIndex by remember { mutableIntStateOf(0) }
Row {
Tabs(
tabList = listOf(
// Tab Item Icon receives a resource Id for the Icon
TabItem.Icon(title = "Tab 1", iconId = R.drawable.ic_image_fallback_image),
TabItem.Icon(title = "Tab 2", iconId = R.drawable.ic_image_fallback_image)
),
selectedTabIndex = fluidTabIndex,
// Fluids property is recommended when you have 4 tabs or less
behaviour = TabsBehaviour.Fluid,
// Modifier.weight is used to distribute the available horizontal space
modifier = Modifier.weight(1f)
) { fluidTabIndex = it }
IconButton(
iconResource = R.drawable.ic_skapa_product_range_information_circle_small,
contentDescription = "Show additional information",
modifier = Modifier.padding(start = SkapaSpacing.space50),
size = IconButtonSize.Small
) { }
}
}
}Content copied to clipboard