SwipeToRevealCard
Composable Component
SwipeToReveal
Material composable for Card
s. This adds the option to configure up to two
additional actions on the Card
: a mandatory primaryAction
and an optional secondaryAction
.
These actions are initially hidden and revealed only when the content
is swiped. These
additional actions can be triggered by clicking on them after they are revealed. It is
recommended to trigger primaryAction
on full swipe of the content
.
Android
@ExperimentalWearMaterialApi
@Composable
public fun SwipeToRevealCard(
primaryAction: @Composable () -> Unit,
revealState: RevealState,
onFullSwipe: () -> Unit,
modifier: Modifier = Modifier,
secondaryAction: @Composable (() -> Unit)? = null,
undoPrimaryAction: @Composable (() -> Unit)? = null,
undoSecondaryAction: @Composable (() -> Unit)? = null,
colors: SwipeToRevealActionColors = SwipeToRevealDefaults.actionColors(),
shape: Shape = SwipeToRevealDefaults.CardActionShape,
content: @Composable () -> Unit,
)
Parameters
primaryAction | A composable to describe the primary action when swiping. The action will be triggered on clicking the action. See SwipeToRevealPrimaryAction . |
revealState | RevealState of the SwipeToReveal |
onFullSwipe | A lambda which will be triggered on full swipe from either of the anchors. We recommend to keep this similar to primary action click action. This sets the RevealState.lastActionType to RevealActionType.PrimaryAction . |
modifier | Modifier to be applied on the composable |
secondaryAction | A composable to describe the contents of secondary action.The action will be triggered on clicking the action. See SwipeToRevealSecondaryAction |
undoPrimaryAction | A composable to describe the contents of undo action when the primary action was triggered. See SwipeToRevealUndoAction |
undoSecondaryAction | A composable to describe the contents of undo action when secondary action was triggered. See SwipeToRevealUndoAction |
colors | An instance of SwipeToRevealActionColors to describe the colors of actions. See SwipeToRevealDefaults.actionColors . |
shape | The shape of primary and secondary action composables. Recommended shape for cards is SwipeToRevealDefaults.CardActionShape . |
content | The initial content shown prior to the swipe-to-reveal gesture. Custom accessibility actions should always be added to the content using Modifier.semantics - examples are shown in the code samples. |
Code Examples
SwipeToRevealCardSample
@OptIn(ExperimentalWearMaterialApi::class)
@Composable
fun SwipeToRevealCardSample(swipeToDismissBoxState: SwipeToDismissBoxState) {
val revealState = rememberRevealState()
SwipeToRevealCard(
revealState = revealState,
modifier =
Modifier.fillMaxWidth()
// Use edgeSwipeToDismiss to allow SwipeToDismissBox to capture swipe events
.edgeSwipeToDismiss(swipeToDismissBoxState),
primaryAction = {
SwipeToRevealPrimaryAction(
revealState = revealState,
icon = { Icon(SwipeToRevealDefaults.Delete, "Delete") },
label = { Text("Delete") },
onClick = { /* Add the click handler here */ },
)
},
secondaryAction = {
SwipeToRevealSecondaryAction(
revealState = revealState,
onClick = { /* Add the click handler here */ },
) {
Icon(SwipeToRevealDefaults.MoreOptions, "More Options")
}
},
undoPrimaryAction = {
SwipeToRevealUndoAction(
revealState = revealState,
label = { Text("Undo") },
onClick = { /* Add the undo handler for primary action */ },
)
},
undoSecondaryAction = {
SwipeToRevealUndoAction(
revealState = revealState,
label = { Text("Undo") },
onClick = { /* Add the undo handler for secondary action */ },
)
},
onFullSwipe = { /* Add the full swipe handler here */ },
) {
AppCard(
onClick = { /* Add the Card click handler */ },
appName = { Text("App name") },
appImage = {
Icon(
painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
contentDescription = "airplane",
modifier =
Modifier.size(CardDefaults.AppImageSize)
.wrapContentSize(align = Alignment.Center),
)
},
title = { Text("App Card") },
time = { Text("now") },
modifier =
Modifier.semantics {
// Use custom actions to make the primary and secondary actions accessible
customActions =
listOf(
CustomAccessibilityAction("Delete") {
/* Add the primary action click handler here */
true
},
CustomAccessibilityAction("More Options") {
/* Add the secondary click handler here */
true
},
)
},
) {
Text("Basic card with Swipe to Reveal actions")
}
}
}
Create your own Component Library
Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled