# SwipeToRevealCard

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/wear/compose/material/ExperimentalWearMaterialApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealCard.composable#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)( primaryAction: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, revealState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/RevealState, onFullSwipe: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, secondaryAction: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, undoPrimaryAction: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, undoSecondaryAction: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealActionColors, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToReveal(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,kotlin.Function0,kotlin.Function0)` Material composable for `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)`s. |

## Functions

### SwipeToRevealCard

Artifact: [androidx.wear.compose:compose-material](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material/SwipeToReveal.kt+function:SwipeToRevealCard) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@ExperimentalWearMaterialApi
@Composable
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
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToReveal(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,kotlin.Function0,kotlin.Function0)` Material composable for `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)`s. This adds the option to configure up to two additional actions on the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)`: a mandatory `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` and an optional `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)`. These actions are initially hidden and revealed only when the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` is swiped. These additional actions can be triggered by clicking on them after they are revealed. It is recommended to trigger `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` on full swipe of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)`.

For actions like "Delete", consider adding `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` (displayed when the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` is activated) and/or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` (displayed when the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` is activated). Adding undo composables allow users to undo the action that they just performed.

Example of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealCard.composable#SwipeToRevealCard(kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0)` with primary and secondary actions

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.CustomAccessibilityAction
import androidx.compose.ui.semantics.customActions
import androidx.compose.ui.semantics.semantics
import androidx.wear.compose.foundation.edgeSwipeToDismiss
import androidx.wear.compose.material.AppCard
import androidx.wear.compose.material.CardDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.SwipeToRevealCard
import androidx.wear.compose.material.SwipeToRevealDefaults
import androidx.wear.compose.material.SwipeToRevealPrimaryAction
import androidx.wear.compose.material.SwipeToRevealSecondaryAction
import androidx.wear.compose.material.SwipeToRevealUndoAction
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.rememberRevealState

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")
    }
}
```

| Parameters |
|---|---|
| `primaryAction: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A composable to describe the primary action when swiping. The action will be triggered on clicking the action. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealPrimaryAction.composable#SwipeToRevealPrimaryAction(androidx.wear.compose.material.RevealState,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource)`. |
| `revealState: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/RevealState` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/RevealState` of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToReveal(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,kotlin.Function0,kotlin.Function0)` |
| `onFullSwipe: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | 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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/RevealState#lastActionType()` to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/RevealActionType#PrimaryAction()`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied on the composable |
| `secondaryAction: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A composable to describe the contents of secondary action. The action will be triggered on clicking the action. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealSecondaryAction.composable#SwipeToRevealSecondaryAction(androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` |
| `undoPrimaryAction: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A composable to describe the contents of undo action when the primary action was triggered. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealUndoAction.composable#SwipeToRevealUndoAction(androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.Function0)` |
| `undoSecondaryAction: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A composable to describe the contents of undo action when secondary action was triggered. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealUndoAction.composable#SwipeToRevealUndoAction(androidx.wear.compose.material.RevealState,kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0,kotlin.Function0)` |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealActionColors = SwipeToRevealDefaults.actionColors()` | An instance of `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealActionColors` to describe the colors of actions. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealDefaults#actionColors(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)`. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = SwipeToRevealDefaults.CardActionShape` | The shape of primary and secondary action composables. Recommended shape for cards is `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/SwipeToRevealDefaults#CardActionShape()`. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The initial content shown prior to the swipe-to-reveal gesture. Custom accessibility actions should always be added to the content using `https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/semantics.modifier#(androidx.compose.ui.Modifier).semantics(kotlin.Boolean,kotlin.Function1)` - examples are shown in the code samples. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToReveal(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.wear.compose.material.RevealState,kotlin.Function0,kotlin.Function0,kotlin.Function0)` |   |