Secondary tabs are used within a content area to further separate related content and establish hierarchy.
SecondaryTextTabs
@Preview
@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun SecondaryTextTabs() {
var state by remember { 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,
)
}
}