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

PillGroup

@Composable
fun PillGroup(items: List<PillGroupItem>, modifier: Modifier = Modifier, size: PillSize = PillSize.Medium, alignment: Alignment.Horizontal = Alignment.CenterHorizontally, @IntRange(from = 1, to = 2147483647) maxVisibleItems: Int = items.size, expandedButtonLabel: String? = null, state: PillGroupState = PillGroupState.Collapsed, onStateChanged: (state: PillGroupState) -> Unit, onClickItem: (position: Int, item: PillGroupItem) -> Unit)

Pill Group component allows Pills to be combined together inside a Row to achieve group-like behaviour. PillGroup implements the fixed-width container behaviour and wrap pills onto new rows, similar to a paragraph of text. The container height can be controlled by determining a maximum number of visible pills. When the number of maximum visible pills is set, an overflow button allows users to reveal the remaining content. Actions bound to the overflow button can vary.

Parameters

items

A list of PillGroupItems to be displayed in the same selectable group.

modifier

Modifier to be applied to the radio button layout

size

PillSize defines the size of the pills. The default value is PillSize.Medium.

alignment

The horizontal alignment of the pills.

maxVisibleItems

A maximum number of visible pills that should be displayed before showing overflow button.

expandedButtonLabel

label to be display in the last pill button when state is PillGroupState.Collapsed

state

current PillGroupState of the group. it determines if the group is either Expanded or Collapsed

onStateChanged

if the PillGroup is collapsed and you click the show more button, this callback is invoked.

onClickItem

Will be called when the user clicks a Pill.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconPosition
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.PillGroup
import net.ikea.skapa.ui.components.PillGroupItem
import net.ikea.skapa.ui.components.PillGroupState

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    val items = listOf(
        PillGroupItem(null, "Functionality", true),
        PillGroupItem(null, "John Doe", painterResource(R.drawable.ic_skapa_fallback_image), true),
        PillGroupItem(null, "Pet-friendly", R.drawable.ic_skapa_fallback_image, iconPosition = IconPosition.Horizontal.Trailing),
        PillGroupItem(null, "Accessibility"),
        PillGroupItem(null, "Design", R.drawable.ic_skapa_fallback_image)
    ).toMutableStateList()

    var pillGroupState by remember { mutableStateOf(PillGroupState.Collapsed) }
    val maxVisibleItems = 3

    Column {
        PillGroup(
            items = items,
            maxVisibleItems = maxVisibleItems,
            // Provide localized text for the show more button
            expandedButtonLabel = "${items.size - maxVisibleItems} more...",
            state = pillGroupState,
            onStateChanged = { newState ->
                // Do something when state change
                pillGroupState = newState
            },
            onClickItem = { index, item ->
                // Do something Item Click
                items[index] = item.deepCopy(selected = !item.selected)
            }
        )
        // Offer a way back to the collapsed state
        if (pillGroupState == PillGroupState.Expanded) {
            Button(label = "Collapse") { pillGroupState = PillGroupState.Collapsed }
        }
    }
} 
   //sampleEnd
}