# SwipeToDismissBox

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/SwipeToDismissBox.composable#SwipeToDismissBox(androidx.compose.material3.SwipeToDismissBoxState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function1)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SwipeToDismissBoxState, backgroundContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enableDismissFromStartToEnd: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, enableDismissFromEndToStart: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, gesturesEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, onDismiss: (https://developer.android.com/reference/kotlin/androidx/compose/material3/SwipeToDismissBoxValue) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A composable that can be dismissed by swiping left or right. | Cmn |

## Functions

### SwipeToDismissBox

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/SwipeToDismissBox.kt+function:SwipeToDismissBox)

```
@Composable
fun SwipeToDismissBox(
    state: SwipeToDismissBoxState,
    backgroundContent: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    enableDismissFromStartToEnd: Boolean = true,
    enableDismissFromEndToStart: Boolean = true,
    gesturesEnabled: Boolean = true,
    onDismiss: (SwipeToDismissBoxValue) -> Unit = {},
    content: @Composable RowScope.() -> Unit
): Unit
```

A composable that can be dismissed by swiping left or right.

```kotlin
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.ListItem
import androidx.compose.material3.OutlinedCard
import androidx.compose.material3.SwipeToDismissBox
import androidx.compose.material3.SwipeToDismissBoxValue
import androidx.compose.material3.Text
import androidx.compose.material3.rememberSwipeToDismissBoxState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape

val dismissState = rememberSwipeToDismissBoxState()
var isVisible by remember { mutableStateOf(true) }
val scope = rememberCoroutineScope()
if (isVisible) {
    SwipeToDismissBox(
        state = dismissState,
        backgroundContent = {
            val color by
                animateColorAsState(
                    when (dismissState.targetValue) {
                        SwipeToDismissBoxValue.Settled -> Color.LightGray
                        SwipeToDismissBoxValue.StartToEnd -> Color.Green
                        SwipeToDismissBoxValue.EndToStart -> Color.Red
                    }
                )
            Box(Modifier.fillMaxSize().background(color))
        },
        onDismiss = { direction ->
            if (direction == SwipeToDismissBoxValue.EndToStart) {
                isVisible = false
            } else {
                scope.launch { dismissState.reset() }
            }
        },
    ) {
        OutlinedCard(shape = RectangleShape) {
            ListItem(
                content = { Text("Cupcake") },
                supportingContent = { Text("Swipe me left or right!") },
            )
        }
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/SwipeToDismissBoxState` | The state of this component. |
| `backgroundContent: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A composable that is stacked behind the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SwipeToDismissBox(androidx.compose.material3.SwipeToDismissBoxState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function1)` and is exposed when the content is swiped. You can/should use the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SwipeToDismissBox(androidx.compose.material3.SwipeToDismissBoxState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function1)` to have different backgrounds on each side. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for this component. |
| `enableDismissFromStartToEnd: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether SwipeToDismissBox can be dismissed from start to end. |
| `enableDismissFromEndToStart: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether SwipeToDismissBox can be dismissed from end to start. |
| `gesturesEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether swipe-to-dismiss can be interacted by gestures. |
| `onDismiss: (https://developer.android.com/reference/kotlin/androidx/compose/material3/SwipeToDismissBoxValue) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html = {}` | Optional callback to be called when `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#SwipeToDismissBox(androidx.compose.material3.SwipeToDismissBoxState,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,kotlin.Boolean,kotlin.Function1,kotlin.Function1)` is dismissed. onDismissed provides the current dismissed direction. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content that can be dismissed. |