New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Material 3 Compose

SwipeToDismissBox

Common

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

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.3.0-beta04")
}

Overloads

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

Parameters

namedescription
stateThe state of this component.
backgroundContentA composable that is stacked behind the [content] and is exposed when the content is swiped. You can/should use the [state] to have different backgrounds on each side.
modifierOptional [Modifier] for this component.
enableDismissFromStartToEndWhether SwipeToDismissBox can be dismissed from start to end.
enableDismissFromEndToStartWhether SwipeToDismissBox can be dismissed from end to start.
gesturesEnabledWhether swipe-to-dismiss can be interacted by gestures.
contentThe content that can be dismissed.

Code Example

SwipeToDismissListItems

@Composable
@Sampled
@Preview
fun SwipeToDismissListItems() {
    val dismissState = rememberSwipeToDismissBoxState()
    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))
        }
    ) {
        OutlinedCard(shape = RectangleShape) {
            ListItem(
                headlineContent = { Text("Cupcake") },
                supportingContent = { Text("Swipe me left or right!") }
            )
        }
    }
}