# ScrollableTabRow

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable https://developer.android.com/reference/kotlin/androidx/compose/material/ScrollableTabRow.composable#ScrollableTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1,kotlin.Function0,kotlin.Function0)( selectedTabIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, edgePadding: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, indicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable (tabPositions: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/compose/material/TabPosition>) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, divider: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, tabs: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design scrollable tabs](https://material.io/components/tabs#scrollable-tabs) | Cmn |

## Functions

### ScrollableTabRow

Cmn Artifact: [androidx.compose.material:material](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/TabRow.kt+function:ScrollableTabRow)

```
@Composable
@UiComposable
fun ScrollableTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    edgePadding: Dp = TabRowDefaults.ScrollableTabRowPadding,
    indicator: @Composable @UiComposable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
            TabRowDefaults.Indicator(Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]))
        },
    divider: @Composable @UiComposable () -> Unit = @Composable { TabRowDefaults.Divider() },
    tabs: @Composable @UiComposable () -> Unit
): Unit
```

[Material Design scrollable tabs](https://material.io/components/tabs#scrollable-tabs)

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.

![Scrollable tabs
image](https://developer.android.com/images/reference/androidx/compose/material/scrollable-tabs.png)

A ScrollableTabRow contains a row of `https://developer.android.com/reference/kotlin/androidx/compose/material/Tab.composable#Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`s, and displays an indicator underneath the currently selected tab. A ScrollableTabRow 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 `https://developer.android.com/reference/kotlin/androidx/compose/material/TabRow.composable#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)`.

| Parameters |
|---|---|
| `selectedTabIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | the index of the currently selected tab |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for this ScrollableTabRow |
| `backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.primarySurface` | The background color for the ScrollableTabRow. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Transparent()` to have no color. |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = contentColorFor(backgroundColor)` | The preferred content color provided by this ScrollableTabRow to its children. Defaults to either the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#ScrollableTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1,kotlin.Function0,kotlin.Function0)`, or if `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#ScrollableTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1,kotlin.Function0,kotlin.Function0)` is not a color from the theme, this will keep the same value set above this ScrollableTabRow. |
| `edgePadding: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = TabRowDefaults.ScrollableTabRowPadding` | the padding between the starting and ending edge of ScrollableTabRow, and the tabs inside the ScrollableTabRow. This padding helps inform the user that this tab row can be scrolled, unlike a `https://developer.android.com/reference/kotlin/androidx/compose/material/TabRow.composable#TabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)`. |
| `indicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable (tabPositions: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/compose/material/TabPosition>) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = @Composable { tabPositions -> TabRowDefaults.Indicator(Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])) }` | the indicator that represents which tab is currently selected. By default this will be a `https://developer.android.com/reference/kotlin/androidx/compose/material/TabRowDefaults#Indicator(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color)`, using a `https://developer.android.com/reference/kotlin/androidx/compose/material/TabRowDefaults#(androidx.compose.ui.Modifier).tabIndicatorOffset(androidx.compose.material.TabPosition)` modifier to animate its position. Note that this indicator will be forced to fill up the entire ScrollableTabRow, so you should use `https://developer.android.com/reference/kotlin/androidx/compose/material/TabRowDefaults#(androidx.compose.ui.Modifier).tabIndicatorOffset(androidx.compose.material.TabPosition)` or similar to animate the actual drawn indicator inside this space, and provide an offset from the start. |
| `divider: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = @Composable { TabRowDefaults.Divider() }` | the divider displayed at the bottom of the ScrollableTabRow. This provides a layer of separation between the ScrollableTabRow and the content displayed underneath. |
| `tabs: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/ui/UiComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the tabs inside this ScrollableTabRow. Typically this will be multiple `https://developer.android.com/reference/kotlin/androidx/compose/material/Tab.composable#Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`s. Each element inside this lambda will be measured and placed evenly across the TabRow, each taking up equal space. |