OudsNavigationBarItem
An OUDS navigation bar item, used in OudsNavigationBar.
The recommended configuration for an OudsNavigationBarItem depends on how many items there are inside a OudsNavigationBar:
Three destinations: Display icons and text labels for all destinations.
Four destinations: Active destinations display an icon and text label. Inactive destinations display icons, and text labels are recommended.
Five destinations: Active destinations display an icon and text label. Inactive destinations use icons, and use text labels if space permits.
OudsNavigationBarItem always shows text labels.
The layout of the item automatically adapts to the screen width:
On medium screens (width >= 600dp): The icon is positioned at the start of the label.
On compact screens (width < 600dp): The icon is positioned on top of the label.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.0.0 |
Parameters
Whether this item is selected or not.
Called when this item is clicked.
Icon of the item.
Label of the item.
Optional badge displayed on the item icon.
MutableInteractionSource that will be used to dispatch events when this item is pressed, hovered or focused.
Samples
data class Item(val label: String, val imageVector: ImageVector, val count: Int? = null)
val items = listOf(
Item("Call", Icons.Default.Call),
Item("Email", Icons.Default.Email, count = 27),
Item("Agenda", Icons.Default.DateRange),
Item("Settings", Icons.Default.Settings)
)
var selectedItemIndex: Int by rememberSaveable { mutableIntStateOf(0) }
OudsNavigationBar(
items = items.mapIndexed { index, item ->
val isSelected = index == selectedItemIndex
OudsNavigationBarItem(
selected = isSelected,
onClick = {
selectedItemIndex = index
// Do something else here
},
icon = OudsNavigationBarItemIcon(imageVector = item.imageVector),
label = item.label,
badge = item.count?.let { count ->
OudsNavigationBarItemBadge(contentDescription = "$count unread emails", count = count)
}
)
}
)