Design/net.ikea.skapa.ui.components/Tabs

Tabs

@Composable
fun Tabs(tabList: List<TabItem>, selectedTabIndex: Int, modifier: Modifier = Modifier, variant: TabVariant = TabVariant.Emphasised, behaviour: TabsBehaviour = TabsBehaviour.Scrollable(), onItemSelected: (Int) -> Unit)

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

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.TabItem
import net.ikea.skapa.ui.components.Tabs
import net.ikea.skapa.ui.components.TabsBehaviour

fun main() { 
   //sampleStart 
   SkapaTheme2(isSystemInDarkTheme()) {
    // Create a mutable Int to remember the index state
    var regularTabIndex by remember { mutableIntStateOf(0) }
    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) }
    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
    ) { fluidTabIndex = it }
} 
   //sampleEnd
}
@Composable
fun Tabs(tabList: List<TabItem>, selectedTabIndex: Int, modifier: Modifier = Modifier, fluid: Boolean = false, shadowColor: Color = SkapaTheme.colors.neutral1, variant: TabVariant = TabVariant.Emphasised, onItemSelected: (Int) -> Unit)

Deprecated (with error)

This function has been deprecated due to removing the `shadowColor` and `fluid` parameters. Fluid is now controlled with the `TabsBehaviour class`.

Replace with

Tabs(tabList = tabList, selectedTabIndex = selectedTabIndex, modifier = modifier, behaviour = if (fluid) TabsBehaviour.Fluid else TabsBehaviour.Scrollable(), variant = variant, onItemSelected = onItemSelected)
Content copied to clipboard

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.

fluid

false as default, if set as true, Tabs will fill max width and each child tab will have same width.

shadowColor

color of the shadow that indicates there are more items you can scroll to.

variant

TabVariant to define the style of the tabs. Emphasised 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

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.TabItem
import net.ikea.skapa.ui.components.Tabs
import net.ikea.skapa.ui.components.TabsBehaviour

fun main() { 
   //sampleStart 
   SkapaTheme2(isSystemInDarkTheme()) {
    // Create a mutable Int to remember the index state
    var regularTabIndex by remember { mutableIntStateOf(0) }
    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) }
    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
    ) { fluidTabIndex = it }
} 
   //sampleEnd
}