SwipeToRevealChip

[SwipeToReveal] Material composable for [Chip]s. This adds the option to configure up to two additional actions on the [Chip]: 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].

For actions like "Delete", consider adding [undoPrimaryAction] (displayed when the [primaryAction] is activated) and/or [undoSecondaryAction] (displayed when the [secondaryAction] is activated). Adding undo composables allow users to undo the action that they just performed.

Installation

This component is available for Jetpack Compose (Android)

dependencies {
   implementation("androidx.wear.compose:compose-material:1.4.0-alpha08")
}

Overloads

@Composable
@OptIn(ExperimentalWearFoundationApi::class)
@ExperimentalWearMaterialApi
fun SwipeToRevealChip(
    primaryAction: @Composable RevealScope.() -> Unit,
    revealState: RevealState,
    onFullSwipe: () -> Unit,
    modifier: Modifier = Modifier,
    secondaryAction: @Composable (RevealScope.() -> Unit)? = null,
    undoPrimaryAction: @Composable (RevealScope.() -> Unit)? = null,
    undoSecondaryAction: @Composable (RevealScope.() -> Unit)? = null,
    colors: SwipeToRevealActionColors = SwipeToRevealDefaults.actionColors(),
    shape: Shape = MaterialTheme.shapes.small,
    content: @Composable () -> Unit
)

Parameters

name	description
`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`	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 chips is [Shapes.small].
`content`	The initial content shown prior to the swipe-to-reveal gesture.

Code Example

SwipeToRevealChipSample

@Composable
fun SwipeToRevealChipSample(swipeToDismissBoxState: SwipeToDismissBoxState) {
    val revealState = rememberRevealState()
    SwipeToRevealChip(
        revealState = revealState,
        modifier = Modifier
            .fillMaxWidth()
            // Use edgeSwipeToDismiss to allow SwipeToDismissBox to capture swipe events
            .edgeSwipeToDismiss(swipeToDismissBoxState)
            .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
                    }
                )
            },
        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 */ }
    ) {
        Chip(
            modifier = Modifier.fillMaxWidth(),
            onClick = { /* Add the chip click handler here */ },
            colors = ChipDefaults.primaryChipColors(),
            border = ChipDefaults.outlinedChipBorder()
        ) {
            Text("SwipeToReveal Chip")
        }
    }
}