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

OudsNavigationBarItem

data class OudsNavigationBarItem(val selected: Boolean, val onClick: () -> Unit, val icon: OudsNavigationBarItemIcon, val label: String? = null, val badge: OudsNavigationBarItemBadge? = null, val interactionSource: MutableInteractionSource? = null) : OudsComponentContent<OudsNavigationBarItem.ExtraParameters>

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.

Parameters

selected

Whether this item is selected or not.

onClick

Called when this item is clicked.

icon

Icon of the item.

label

Label of the item.

badge

Optional badge display on the item icon.

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.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.OudsNavigationBarItemBadge
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   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)
            }
        )
    }
) 
   //sampleEnd
}