# AnimatedPane

Common/All

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/ExperimentalMaterial3AdaptiveApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable <RoleT : https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldRole, ScaffoldValueT : https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldValue<RoleT>> https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldPaneScope<RoleT, ScaffoldValueT>.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPane.composable#(androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope).AnimatedPane(androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,androidx.compose.ui.graphics.Shape,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, enterTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition, exitTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition, boundsAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntRect>, dragToResizeHandle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/DragToResizeState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` The root composable of pane contents in a `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/package-summary#ThreePaneScaffold(androidx.compose.ui.Modifier,androidx.compose.material3.adaptive.layout.PaneScaffoldDirective,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldValue,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldHorizontalOrder,kotlin.Function1,kotlin.Function1,androidx.compose.material3.adaptive.layout.PaneExpansionState,kotlin.Function2,kotlin.Function1)` that supports default motions during pane switching. | Cmn |

## Functions

### ExtendedPaneScaffoldPaneScope.AnimatedPane

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

```
@ExperimentalMaterial3AdaptiveApi
@Composable
fun <RoleT : PaneScaffoldRole, ScaffoldValueT : PaneScaffoldValue<RoleT>> ExtendedPaneScaffoldPaneScope<RoleT, ScaffoldValueT>.AnimatedPane(
    modifier: Modifier = Modifier,
    enterTransition: EnterTransition = motionDataProvider.calculateDefaultEnterTransition(paneRole),
    exitTransition: ExitTransition = motionDataProvider.calculateDefaultExitTransition(paneRole),
    boundsAnimationSpec: FiniteAnimationSpec<IntRect> = PaneMotionDefaults.AnimationSpec,
    dragToResizeHandle: (@Composable (DragToResizeState) -> Unit)? = null,
    shape: Shape = RectangleShape,
    content: @Composable AnimatedPaneScope.() -> Unit
): Unit
```

The root composable of pane contents in a `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/package-summary#ThreePaneScaffold(androidx.compose.ui.Modifier,androidx.compose.material3.adaptive.layout.PaneScaffoldDirective,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldValue,androidx.compose.material3.adaptive.layout.ThreePaneScaffoldHorizontalOrder,kotlin.Function1,kotlin.Function1,androidx.compose.material3.adaptive.layout.PaneExpansionState,kotlin.Function2,kotlin.Function1)` that supports default motions during pane switching. It's recommended to use this composable to wrap your own contents when passing them into pane parameters of the scaffold functions, therefore your panes can have a nice default animation for free.

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
)
```

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberListDetailPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberListDetailPaneScaffoldNavigator<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val extraItems = listOf("Extra 1", "Extra 2", "Extra 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    extraPane = {
        AnimatedPane {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
            initialAnchoredIndex = 1,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

```kotlin
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.ListDetailPaneScaffold
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsDialogSample<NavItemData>()
val items = listOf("Item 1", "Item 2", "Item 3")
val extraItems = listOf("Extra 1", "Extra 2", "Extra 3")
val selectedItem = scaffoldNavigator.currentDestination?.contentKey

ListDetailPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    listPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) {
            ListPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    detailPane = {
        AnimatedPane {
            DetailPaneContent(
                items = items,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    extraPane = {
        AnimatedPane(shape = RoundedCornerShape(16.dp)) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
            initialAnchoredIndex = 1,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

```kotlin
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = rememberSupportingPaneScaffoldNavigator<NavItemData>()
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        AnimatedPane {
            MainPaneContent(
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
    },
    extraPane = {
        AnimatedPane {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

```kotlin
import androidx.compose.foundation.background
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.material3.adaptive.layout.PaneExpansionAnchor
import androidx.compose.material3.adaptive.layout.PaneExpansionState
import androidx.compose.material3.adaptive.layout.SupportingPaneScaffold
import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsBottomSheetSample<NavItemData>()
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)

SupportingPaneScaffold(
    directive = scaffoldNavigator.scaffoldDirective,
    scaffoldState = scaffoldNavigator.scaffoldState,
    mainPane = {
        AnimatedPane {
            MainPaneContent(
                scaffoldNavigator = scaffoldNavigator,
                hasExtraPane = true,
                coroutineScope = coroutineScope,
            )
        }
    },
    supportingPane = {
        AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
    },
    extraPane = {
        AnimatedPane(
            modifier =
                Modifier.preferredWidth(1f)
                    .preferredHeight(0.5f)
                    .background(MaterialTheme.colorScheme.surface),
            dragToResizeHandle = { BottomSheetDefaults.DragHandle() },
        ) {
            ExtraPaneContent(
                extraItems = extraItems,
                selectedItem = selectedItem,
                scaffoldNavigator = scaffoldNavigator,
                coroutineScope = coroutineScope,
            )
        }
    },
    paneExpansionState =
        rememberPaneExpansionState(
            keyProvider = scaffoldNavigator.scaffoldValue,
            anchors = PaneExpansionAnchors,
        ),
    paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier applied to the `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPane.composable#(androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope).AnimatedPane(androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,androidx.compose.ui.graphics.Shape,kotlin.Function1)`. |
| `enterTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition = motionDataProvider.calculateDefaultEnterTransition(paneRole)` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/EnterTransition` used to animate the pane in. |
| `exitTransition: https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition = motionDataProvider.calculateDefaultExitTransition(paneRole)` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/ExitTransition` used to animate the pane out. |
| `boundsAnimationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntRect> = PaneMotionDefaults.AnimationSpec` | The `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` used to animate the bounds of the pane when the pane is keeping showing but changing its size and/or position. |
| `dragToResizeHandle: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/DragToResizeState) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | The optional handle which will be shown when the pane is levitated and drag-to-resizable; the handle will be draggable and clickable to resize the pane freely or among collapsed, partially expanded, and expanded states. See `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/rememberDragToResizeState.composable#rememberDragToResizeState(androidx.compose.material3.adaptive.layout.DockedEdge,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)` for more details about how to implement the drag-to-resize behavior. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = RectangleShape` | The shape of the pane, which will also be applied to the shadow when the pane is levitated. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content of the `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPane.composable#(androidx.compose.material3.adaptive.layout.ExtendedPaneScaffoldPaneScope).AnimatedPane(androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Function1,androidx.compose.ui.graphics.Shape,kotlin.Function1)`. Also see `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/AnimatedPaneScope`. See usage samples at: |