Composable Component
The recommended configuration for a BottomNavigationItem depends on how many items there are inside a BottomNavigation:
- 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.
Common
@Composable
fun RowScope.BottomNavigationItem(
selected: Boolean,
onClick: () -> Unit,
icon: @Composable () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
label: @Composable (() -> Unit)? = null,
alwaysShowLabel: Boolean = true,
interactionSource: MutableInteractionSource? = null,
selectedContentColor: Color = LocalContentColor.current,
unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium),
)Parameters
| selected | whether this item is selected |
| onClick | the callback to be invoked when this item is selected |
| icon | icon for this item, typically this will be an Icon |
| modifier | optional Modifier for this item |
| enabled | controls the enabled state of this item. When false, this item will not be clickable and will appear disabled to accessibility services. |
| label | optional text label for this item |
| alwaysShowLabel | whether to always show the label for this item. If false, the label will only be shown when this item is selected. |
| interactionSource | an optional hoisted MutableInteractionSource for observing and emitting Interactions for this item. You can use this to change the item's appearance or preview the item in different states. Note that if null is provided, interactions will still happen internally. |
| selectedContentColor | the color of the text label and icon when this item is selected, and the color of the ripple. |
| unselectedContentColor | the color of the text label and icon when this item is not selected |
