Design/net.ikea.skapa.ui.components/ListBox

ListBox

@Composable
fun <T> ListBox(expanded: Boolean, items: List<T>, itemContent: @Composable (T) -> Unit, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding, useSafeHeight: Boolean = true, onItemClick: (T) -> Unit?)

Wrapped Material DropdownMenu with Skapa features, used to display select options

Note: for group header use the constructor that use ListBoxItemsParams

Parameters

expanded

Whether the ListBox is currently open and visible to the user

items

list of items to be drawn as options.

itemContent

Composable function of how each item is going to be drawn.

onDismissRequest

Called when the user requests to dismiss the ListBox, such as by tapping outside the ListBox's bounds

modifier

Modifier to be applied to the ListBox.

contentPadding

the padding applied to the content of this ListBox

useSafeHeight

set this to false to opt-out from the vertical WindowInsets.

onItemClick

option callback that is triggered when on option es selected. Selected object comes as a parameter of the callback. Provide null in case the item should not be clickable or you want to handle the click with itemContent composable

See also

Samples

net.ikea.skapa.ui.samples.ListBoxSample
@Composable
fun <T : ListBoxItemHeader> ListBox(expanded: Boolean, itemParams: ListBoxItemsParams<T>, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, useSafeHeight: Boolean = true)

Wrapped Material DropdownMenu with Skapa features, used to display select options

Parameters

expanded

Whether the ListBox is currently open and visible to the user

itemParams

ListBoxItemsParams is group of parameters represents a list of items that Implement ListBoxItemHeader interface and is used to separate the items by headers

onDismissRequest

Called when the user requests to dismiss the ListBox, such as by tapping outside the ListBox's bounds

modifier

Modifier to be applied to the ListBox.

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.ListBox
import net.ikea.skapa.ui.components.ListBoxItemHeader
import net.ikea.skapa.ui.components.ListBoxItemsParams
import net.ikea.skapa.ui.components.ListViewItem
import net.ikea.skapa.ui.components.ListViewItemControls
import net.ikea.skapa.ui.components.ListViewItemSize
import net.ikea.skapa.ui.components.ListViewItemTextStyle
import net.ikea.skapa.ui.components.Pill

fun main() { 
   //sampleStart 
   var expanded by remember { mutableStateOf(false) }
var itemsSelected by remember { mutableStateOf(false) }
var selectValue by remember { mutableStateOf(ListBoxSample.triggerHint) }
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Box {
        Pill(
            label = selectValue,
            selected = itemsSelected
        ) {
            expanded = true
        }
        ListBox(
            expanded = expanded,
            itemParams = ListBoxItemsParams(
                items = ListBoxSample.headerList,
                itemContent = {
                    ListViewItem(
                        title = it.label,
                        trailingControl = ListViewItemControls.RadioButton(it.label == selectValue),
                        textStyle = ListViewItemTextStyle.Regular,
                        onClick = null,
                        size = ListViewItemSize.Small
                    )
                },
                onItemClick = {
                    selectValue = it.label
                    expanded = false
                    itemsSelected = true
                }
            ),
            onDismissRequest = {
                expanded = false
            },
            modifier = Modifier.width(ListBoxSample.maxListWidth)
        )
    }
} 
   //sampleEnd
}