SecondaryScrollableTabRow

Functions summary

Unit
@Composable
SecondaryScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier,
    scrollState: ScrollState,
    containerColor: Color,
    contentColor: Color,
    edgePadding: Dp,
    indicator: @Composable TabIndicatorScope.() -> Unit,
    divider: @Composable () -> Unit,
    minTabWidth: Dp,
    tabs: @Composable () -> Unit
)

Material Design scrollable secondary tabs

Cmn

Functions

SecondaryScrollableTabRow

@Composable
fun SecondaryScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    scrollState: ScrollState = rememberScrollState(),
    containerColor: Color = TabRowDefaults.secondaryContainerColor,
    contentColor: Color = TabRowDefaults.secondaryContentColor,
    edgePadding: Dp = TabRowDefaults.ScrollableTabRowEdgeStartPadding,
    indicator: @Composable TabIndicatorScope.() -> Unit = @Composable { TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = false) ) },
    divider: @Composable () -> Unit = @Composable { HorizontalDivider() },
    minTabWidth: Dp = TabRowDefaults.ScrollableTabRowMinTabWidth,
    tabs: @Composable () -> Unit
): Unit

Material Design scrollable secondary tabs

Material Design scrollable tabs.

Secondary tabs are used within a content area to further separate related content and establish hierarchy. When a set of tabs cannot fit on screen, use scrollable tabs. Scrollable tabs can use longer text labels and a larger number of tabs. They are best used for browsing on touch interfaces.

A scrollable tab row contains a row of Tabs, and displays an indicator underneath the currently selected tab. A scrollable tab row places its tabs offset from the starting edge, and allows scrolling to tabs that are placed off screen. For a fixed tab row that does not allow scrolling, and evenly places its tabs, see SecondaryTabRow.

Parameters
selectedTabIndex: Int

the index of the currently selected tab

modifier: Modifier = Modifier

the Modifier to be applied to this tab row

scrollState: ScrollState = rememberScrollState()

the ScrollState of this tab row

containerColor: Color = TabRowDefaults.secondaryContainerColor

the color used for the background of this tab row. Use Color.Transparent to have no color.

contentColor: Color = TabRowDefaults.secondaryContentColor

the preferred color for content inside this tab row. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.

edgePadding: Dp = TabRowDefaults.ScrollableTabRowEdgeStartPadding

the padding between the starting and ending edge of the scrollable tab row, and the tabs inside the row. This padding helps inform the user that this tab row can be scrolled, unlike a TabRow.

indicator: @Composable TabIndicatorScope.() -> Unit = @Composable { TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = false) ) }

the indicator that represents which tab is currently selected. By default this will be a TabRowDefaults.SecondaryIndicator, using a TabRowDefaults.tabIndicatorOffset modifier to animate its position. Note that this indicator will be forced to fill up the entire tab row, so you should use TabRowDefaults.tabIndicatorOffset or similar to animate the actual drawn indicator inside this space, and provide an offset from the start.

divider: @Composable () -> Unit = @Composable { HorizontalDivider() }

the divider displayed at the bottom of the tab row. This provides a layer of separation between the tab row and the content displayed underneath.

minTabWidth: Dp = TabRowDefaults.ScrollableTabRowMinTabWidth

the minimum width for a Tab in this tab row regardless of content size.

tabs: @Composable () -> Unit

the tabs inside this tab row. Typically this will be multiple Tabs. Each element inside this lambda will be measured and placed evenly across the row, each taking up equal space.