core/com.orange.ouds.core.component/OudsNavigationBarItem

OudsNavigationBarItem

fun RowScope.OudsNavigationBarItem(selected: Boolean, onClick: () -> Unit, icon: OudsNavigationBarItemIcon, modifier: Modifier = Modifier, label: String? = null, enabled: Boolean = true, badge: OudsNavigationBarItemBadge? = null, alwaysShowLabel: Boolean = true, interactionSource: MutableInteractionSource? = null)

An OUDS navigation bar item.

It must be used in OudsNavigationBar.

The recommended configuration for an OudsNavigationBarItem depends on how many items there are inside a OudsNavigationBarItem:

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.

A OudsNavigationBarItem always shows text labels (if it exists) when selected. Showing text labels if not selected is controlled by alwaysShowLabel.

Parameters

selected

Whether this item is selected or not.

onClick

Called when this item is clicked.

icon

Icon of the item.

modifier

Modifier applied to the navigation bar item.

label

Label of the item.

enabled

Controls the enabled state of the item. When false, the item will not be clickable.

badge

Optional badge display on the item icon.

alwaysShowLabel

Whether the label should always be shown.

interactionSource

MutableInteractionSource that will be used to dispatch events when this item is pressed, hovered or focused.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Call
import androidx.compose.material.icons.filled.DateRange
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Settings
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsNavigationBar
import com.orange.ouds.core.component.OudsNavigationBarItem
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   data class Menu(val label: String, val imageVector: ImageVector, val enabled: Boolean = true)

val items = listOf(
    Menu("Call", Icons.Default.Call),
    Menu("Email", Icons.Default.Email),
    Menu("Agenda", Icons.Default.DateRange, enabled = false),
    Menu("Settings", Icons.Default.Settings)
)
var selectedItemIndex: Int by rememberSaveable { mutableIntStateOf(0) }

OudsNavigationBar {
    items.forEachIndexed { index, item ->
        val isSelected = index == selectedItemIndex
        OudsNavigationBarItem(
            modifier = Modifier.weight(1f),
            selected = isSelected,
            onClick = {
                selectedItemIndex = index
                // Do something else here
            },
            icon = OudsNavigationBarItemIcon(
                imageVector = item.imageVector,
                contentDescription = item.label
            ),
            label = item.label,
            enabled = item.enabled
        )
    }
} 
   //sampleEnd
}