MenuItem
fun MenuItem(title: String, modifier: Modifier = Modifier, selected: Boolean = false, leadingImage: MenuItemImage = MenuItemImage.None, quantityLabel: String? = null, enabled: Boolean = true, contentHorizontalPadding: Dp = SkapaSpacing.space150, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onSelected: () -> Unit?)(source)
Composable to be use for selection patters with ListBox, Sheet and Prompt.
Parameters
title
of the menu item.
modifier
Modifier to be applied to the MenuItem.
selected
whether the item was selected or not.
leadingImage
MenuItemImage Optional leading image supporting visual of the menu item
quantityLabel
The trailing meta text to display a quantity of the item.
enabled
whether the component is enabled or grayed out.
contentHorizontalPadding
The padding applied to the content of this menu item.
interactionSource
The MutableInteractionSource representing the stream of Interactions for this component.
onSelected
optional callback will be called when the user clicks on the item
See also
Samples
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.BaseField
import net.ikea.skapa.ui.components.Dropdown
import net.ikea.skapa.ui.components.ListBox
import net.ikea.skapa.ui.components.MenuItem
import net.ikea.skapa.ui.components.MenuItemImage
fun main() {
//sampleStart
var expanded by remember { mutableStateOf(false) }
var selectValue by remember { mutableStateOf("Choose an option") }
var itemsSelected by remember { mutableStateOf(false) }
val products = listOf(
"Bathroom",
"Bedroom",
"Children's room",
"Dining",
"Garden",
"Hallway",
"IKEA for Business",
"Kitchen"
)
// To use Dropdown and ListBox together they need to be wrapped in a box, to ensure ListBox correct positioning when expanded
Box {
Dropdown(
hint = selectValue,
label = "Dropdown",
onClick = {
expanded = true
},
expanded = expanded,
onClickContentDescription = "Choose an option",
modifier = Modifier.fillMaxWidth(),
helperText = "Use as trigger for select patterns",
enabled = true,
selected = itemsSelected,
active = expanded,
interactionSource = remember { MutableInteractionSource() },
state = BaseField.State.Default
)
// You can bing Dropdown with ListBox, Prompt or Sheet depending of the use case
// visit https://skapa.ikea.net/components/selection-patterns:-android/ to check witch use case fits you better
ListBox(
expanded = expanded,
items = products,
onDismissRequest = { expanded = false },
onItemClick = null,
contentPadding = PaddingValues(),
itemContent = {
MenuItem(
title = it,
selected = it == selectValue,
leadingImage = MenuItemImage.None, // You can afford a leading icon if you need it
quantityLabel = null, // quantity Label in case is used as filter
contentHorizontalPadding = SkapaSpacing.space150 // Modify the padding that fits your design
) {
selectValue = it
expanded = false
itemsSelected = true
}
}
)
}
//sampleEnd
}