VerticalCardList
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.
This composable uses VerticalCardListState to store state and this state object uses CardInfo.identifier as the identifiers, meaning it's allowable to pass ephemeral CardInfo instances into this composable as long as they keep using the same stable identifiers. This in turn means that it works directly with DocumentModel in the following way:
val cardInfos by documentModel.documentInfos.collectAsState()
VerticalCardList(
cardInfos = cardInfos,
[...]
)Parameters
The modifier to be applied to the list container.
The list of CardInfo objects to display.
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.
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.
If true, users can long-press and drag cards to reorder them when in standard list mode. Defaults to true.
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 to maximize screen real estate for the detail view. Defaults to true.
An optional max height constraint for the cards. Useful for foldables and wide screens.
The state object to be used to control or observe the list's state.
A composable slot that renders the detailed content below the focused card. It is horizontally centered by default.
A composable slot displayed inside a dashed placeholder card when the cardInfos list is empty.
Callback invoked when a drag-and-drop reordering operation completes. Provides the CardInfo of the moved card and its new index position in the list.
Callback invoked when a card is tapped to be focused.
Callback invoked when the currently focused card is tapped.
Callback invoked when the unfocused card stack is tapped while another card is in focus.
Throws
if unfocusedVisiblePercent is not between 0 and 100.