ChipGroup
Single Select Rail
Day | Night |
---|---|
Single Select Wrap
Day | Night |
---|---|
Multi Select Rail
Day | Night |
---|---|
Multi Select Rail Without Sticky Chip
Day | Night |
---|---|
Multi Select Wrap
Day | Night |
---|---|
Installation
Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.
Usage
Example of a Rail SingleSelectChipGroup:
import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleSelectChipGroup
import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipGroupType
import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipItem
var selectedIndex by remember { mutableStateOf(0) }
BpkSingleSelectChipGroup(
chips = listOf(BpkSingleChipItem("City", BpkIcon.Deals)),
selectedIndex = selectedIndex,
onItemClicked = {/*on click */},
type = BpkSingleChipGroupType.Rail,
)
Example of a Wrap SingleSelectChipGroup:
import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleSelectChipGroup
import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipGroupType
import net.skyscanner.backpack.compose.chipgroup.single.BpkSingleChipItem
var selectedIndex by remember { mutableStateOf(0) }
BpkSingleSelectChipGroup(
chips = listOf(BpkSingleChipItem("City", BpkIcon.Deals)),
selectedIndex = selectedIndex,
onItemClicked = {/*on click */},
type = BpkSingleChipGroupType.Wrap,
)
Example of a Rail MultiSelectChipGroup Without Sticky Chip:
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipGroupType
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipItem
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiSelectChipGroup
// This is just for demonstration purposes, You should get this list from ViewModel
val chips = listOf(
BpkMultiChipItem(
text = "City1",
type = BpkChipType.Selectable
) { /* handle click*/ },
BpkMultiChipItem(
text = "City2",
type = BpkChipType.Selectable,
selected = true,
icon = BpkIcon.Heart
) { /* handle click*/ }
)
BpkMultiSelectChipGroup(
chips = chips,
type = BpkMultiChipGroupType.Rail(),
)
Example of a Rail MultiSelectChipGroup With Sticky Chip:
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipGroupType
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipItem
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkStickyChipItem
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiSelectChipGroup
import net.skyscanner.backpack.compose.chip.BpkChipType
// This is just for demonstration purposes, You should get this list from ViewModel
val chips = listOf(
BpkMultiChipItem(
text = "City1",
type = BpkChipType.Selectable
) { /* handle click*/ },
BpkMultiChipItem(
text = "City2",
type = BpkChipType.Selectable,
selected = true,
icon = BpkIcon.Heart
) { /* handle click*/ }
)
BpkMultiSelectChipGroup(
chips = chips,
type = BpkMultiChipGroupType.Rail(
BpkStickyChipItem(
text = stringResource(R.string.sticky_chip),
icon = BpkIcon.Filter,
) {
/*on click */
},
),
)
Example of a Wrap MultiSelectChipGroup:
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipGroupType
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiChipItem
import net.skyscanner.backpack.compose.chipgroup.multiple.BpkMultiSelectChipGroup
import androidx.lifecycle.compose.collectAsStateWithLifecycle
// This is just for demonstration purposes, You should get this list from ViewModel
val chips = listOf(
BpkMultiChipItem(
text = "City1",
type = BpkChipType.Selectable
) { /* handle click*/ },
BpkMultiChipItem(
text = "City2",
type = BpkChipType.Selectable,
selected = true,
icon = BpkIcon.Heart
) { /* handle click*/ }
)
BpkMultiSelectChipGroup(
chips = chips,
type = BpkMultiChipGroupType.Wrap,
)