multipaz-compose/org.multipaz.compose.cards/VerticalCardList

VerticalCardList

fun VerticalCardList(modifier: Modifier = Modifier, cardInfos: List<CardInfo>, focusedCard: CardInfo?, unfocusedVisiblePercent: Int = 25, allowCardReordering: Boolean = true, showStackWhileFocused: Boolean = true, cardMaxHeight: Dp = Dp.Unspecified, paddingTop: Dp = 16.dp, paddingBottom: Dp = 16.dp, animateListTransitions: Boolean = false, state: VerticalCardListState = rememberVerticalCardListState(), showTopContent: Boolean = state.showTopContent, showPlaceholderWhenEmpty: Boolean = state.showPlaceholderWhenEmpty, topContent: @Composable () -> Unit = {}, showCardInfo: @Composable (CardInfo) -> Unit = {}, emptyContent: @Composable () -> Unit = {}, onCardReordered: (cardInfo: CardInfo, newPosition: Int) -> Unit = { _, _ -> }, onCardFocused: (cardInfo: CardInfo) -> Unit = {}, onCardFocusedTapped: (cardInfo: CardInfo) -> Unit = {}, onCardFocusedStackTapped: (cardInfo: CardInfo) -> Unit = {})

A vertically scrolling list of cards that mimics a physical wallet experience.

In its default state, cards are displayed as a vertical list. The amount of overlap between cards is configurable. Users can long-press a card to drag and drop it into a new position.

When a user taps a card, it enters a "focused" state. The focused card elevates and animates to the top of the viewport. A dynamic content section (showCardInfo) fades in immediately below it. By default, the remaining unfocused cards animate into a 3D overlapping stack at the bottom of the screen.

Parameters

modifier

The modifier to be applied to the list container.

cardInfos

The list of CardInfo objects to display.

focusedCard

The currently focused card. When null, the component operates in standard list mode. When set to a CardInfo, that card is brought to the top and detailed information is displayed.

unfocusedVisiblePercent

Determines how much of each card is visible when not focused. A value of 100 displays cards with standard spacing (no overlap). Lower values cause cards to overlap, allowing more cards to fit on screen. Must be between 0 and 100.

allowCardReordering

If true, users can long-press and drag cards to reorder them when in standard list mode. Defaults to true.

showStackWhileFocused

If true, unfocused cards will collapse into a 3D stack at the bottom of the screen when a card is focused. If false, unfocused cards fade away entirely. Defaults to true.

cardMaxHeight

An optional max height constraint for the cards. Useful for foldables and wide screens.

paddingTop

The top padding for the card list. Defaults to 16.dp.

paddingBottom

The bottom padding for the card list. Defaults to 16.dp.

state

The state object to be used to control or observe the list's state.

showTopContent

Whether the topContent composable should be shown when no card is focused.

showPlaceholderWhenEmpty

Whether to show a dashed placeholder card when the card list is empty.

topContent

A composable slot displayed at the top of the list when no card is focused.

showCardInfo

A composable slot that renders the detailed content below the focused card.

emptyContent

A composable slot displayed inside a dashed placeholder card when empty.

onCardReordered

Callback invoked when a drag-and-drop reordering operation completes.

onCardFocused

Callback invoked when a card is tapped to be focused.

onCardFocusedTapped

Callback invoked when the currently focused card is tapped.

onCardFocusedStackTapped

Callback invoked when the unfocused card stack is tapped while another card is in focus.