# SecondaryTabRow

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/material3/SecondaryTabRow.composable#SecondaryTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,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, containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, indicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/TabIndicatorScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, divider: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, tabs: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design fixed secondary tabs](https://m3.material.io/components/tabs/overview) | Cmn |

## Functions

### SecondaryTabRow

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

```
@Composable
fun SecondaryTabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.secondaryContainerColor,
    contentColor: Color = TabRowDefaults.secondaryContentColor,
    indicator: @Composable TabIndicatorScope.() -> Unit = @Composable {
            TabRowDefaults.SecondaryIndicator(
                Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = false)
            )
        },
    divider: @Composable () -> Unit = @Composable { HorizontalDivider() },
    tabs: @Composable () -> Unit
): Unit
```

[Material Design fixed secondary tabs](https://m3.material.io/components/tabs/overview)

Secondary tabs are used within a content area to further separate related content and establish hierarchy. Fixed tabs display all tabs in a set simultaneously. To navigate between fixed tabs, tap an individual tab, or swipe left or right in the content area.

A TabRow contains a row of `https://developer.android.com/reference/kotlin/androidx/compose/material3/Tab.composable#Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.interaction.MutableInteractionSource)`s, and displays an indicator underneath the currently selected tab. A Fixed TabRow places its tabs evenly spaced along the entire row, with each tab taking up an equal amount of space. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/SecondaryScrollableTabRow.composable#SecondaryScrollableTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.foundation.ScrollState,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,kotlin.Function0)` for a tab row that does not enforce equal size, and allows scrolling to tabs that do not fit on screen.

A simple example with text tabs looks like:

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.SecondaryTabRow
import androidx.compose.material3.Tab
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow

var state by rememberSaveable { mutableStateOf(0) }
val titles = listOf("Tab 1", "Tab 2", "Tab 3 with lots of text")
Column {
    SecondaryTabRow(selectedTabIndex = state) {
        titles.forEachIndexed { index, title ->
            Tab(
                selected = state == index,
                onClick = { state = index },
                text = { Text(text = title, maxLines = 2, overflow = TextOverflow.Ellipsis) },
            )
        }
    }
    Text(
        modifier = Modifier.align(Alignment.CenterHorizontally),
        text = "Secondary tab ${state + 1} selected",
        style = MaterialTheme.typography.bodyLarge,
    )
}
```

| 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` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this tab row |
| `containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = TabRowDefaults.secondaryContainerColor` | the color used for the background of this tab row. 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 = TabRowDefaults.secondaryContentColor` | the preferred color for content inside this tab row. Defaults to either the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SecondaryTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)`, or to the current `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LocalContentColor()` if `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SecondaryTabRow(kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,kotlin.Function0,kotlin.Function0)` is not a color from the theme. |
| `indicator: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/TabIndicatorScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = @Composable { TabRowDefaults.SecondaryIndicator( Modifier.tabIndicatorOffset(selectedTabIndex, matchContentSize = false) ) }` | the indicator that represents which tab is currently selected. By default this will be a `https://developer.android.com/reference/kotlin/androidx/compose/material3/TabRowDefaults#SecondaryIndicator(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color)`, using a `https://developer.android.com/reference/kotlin/androidx/compose/material3/TabRowDefaults#(androidx.compose.ui.Modifier).tabIndicatorOffset(androidx.compose.material3.TabPosition)` modifier to animate its position. Note that this indicator will be forced to fill up the entire tab row, so you should use `https://developer.android.com/reference/kotlin/androidx/compose/material3/TabRowDefaults#(androidx.compose.ui.Modifier).tabIndicatorOffset(androidx.compose.material3.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://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = @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. |
| `tabs: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the tabs inside this tab row. Typically this will be multiple `https://developer.android.com/reference/kotlin/androidx/compose/material3/Tab.composable#Tab(kotlin.Boolean,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.interaction.MutableInteractionSource)`s. Each element inside this lambda will be measured and placed evenly across the row, each taking up equal space. |