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

Tabs

@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)

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

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,
        // fluid is set as false by default and allow the tabs to be scrollable
        fluid = false,
        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
        fluid = true
    ) { fluidTabIndex = it }
} 
   //sampleEnd
}