JetpackTabRow
fun JetpackTabRow(selectedTabIndex: Int, modifier: Modifier = Modifier, tabs: @Composable () -> Unit)
Jetpack tab row. Wraps Material 3 TabRow.
A container for tabs with a secondary indicator that shows the selected tab position. Tabs are evenly distributed across the available width.
Features:
Transparent container background
Secondary indicator (2dp height) that animates between tabs
Equal spacing for all tabs
Theme-aware colors from MaterialTheme
Usage Example:
var selectedTab by remember { mutableIntStateOf(0) }
val tabs = listOf("Feed", "Explore", "Profile")
Column {
JetpackTabRow(selectedTabIndex = selectedTab) {
tabs.forEachIndexed { index, title ->
JetpackTab(
selected = selectedTab == index,
onClick = { selectedTab = index },
text = { Text(title) }
)
}
}
// Content for selected tab
when (selectedTab) {
0 -> FeedScreen()
1 -> ExploreScreen()
2 -> ProfileScreen()
}
}Content copied to clipboard
Parameters
selectedTabIndex
The index of the currently selected tab.
modifier
Modifier to be applied to the tab row.
tabs
The tabs inside this tab row. Typically this will be multiple JetpackTabs. Each element inside this lambda will be measured and placed evenly across the row, each taking up equal space.
See also
Individual tab component