🌈 Create new beautiful Compose Gradients with our new wesite ->
Compose Component

TabRow

TV-Material Design Horizontal TabRow Display all tabs in a set simultaneously and if the tabs exceed the container size, it has scrolling to navigate to next tab.

TabRow

Source set: Android
@Composable
fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.ContainerColor,
    contentColor: Color = TabRowDefaults.contentColor(),
    separator: @Composable () -> Unit = { TabRowDefaults.TabSeparator() },
    indicator: @Composable (tabPositions: List<DpRect>, doesTabRowHaveFocus: Boolean) -> Unit =
        @Composable { tabPositions, doesTabRowHaveFocus ->
            tabPositions.getOrNull(selectedTabIndex)?.let { currentTabPosition ->
                TabRowDefaults.PillIndicator(
                    currentTabPosition = currentTabPosition,
                    doesTabRowHaveFocus = doesTabRowHaveFocus,
                )
            }
        },
    tabs: @Composable TabRowScope.() -> Unit,
)

Parameters

selectedTabIndex the index of the currently selected tab
modifier the Modifier to be applied to this tab row
containerColor the color used for the background of this tab row
contentColor the primary color used in the tabs
separator use this composable to add a separator between the tabs
indicator used to indicate which tab is currently selected and/or focused. This lambda provides 2 values: tabPositions: list of DpRect which provides the position of each tab doesTabRowHaveFocus: whether any Tab within TabRow is focused
tabs a composable which will render all the tabs