Navigation Rail¶
“Navigation rails provide ergonomic movement between primary destinations in apps.”
Example¶
enum class Page(val title:String, val content: String){
HOME("home","Show only icon"),
SEARCH("Search","Show icon with label"),
SETTINGS("Settings","Show icon /Show the label only when selected")
}
@Composable
fun NavigationRailSample() {
var selectedItem by remember { mutableStateOf(0) }
val pages = Page.values()
val icons = listOf(Icons.Filled.Home, Icons.Filled.Search, Icons.Filled.Settings)
Row {
NavigationRail {
pages.forEachIndexed { index, item ->
when(item){
Page.HOME -> {
NavigationRailItem(
icon = { Icon(icons[index], contentDescription = "") },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
Page.SEARCH -> {
NavigationRailItem(
label = { Text(item.title) },
icon = { Icon(icons[index], contentDescription = "") },
selected = selectedItem == index,
onClick = { selectedItem = index }
)
}
Page.SETTINGS -> {
NavigationRailItem(
label = { Text(item.title) },
icon = { Icon(icons[index], contentDescription = "") },
selected = selectedItem == index,
onClick = { selectedItem = index },
alwaysShowLabel = false
)
}
}
}
}
Text(pages[selectedItem].content, Modifier.padding(start = 8.dp))
}
}
See also:¶
Last update: July 27, 2022