# PaneScaffoldScope

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/PaneScaffold.kt+class:androidx.compose.material3.adaptive.layout.PaneScaffoldScope) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.0.0) Common/All
- Cmn

  ```
  sealed interface PaneScaffoldScope
  ```
Known direct subclasses [ExtendedPaneScaffoldScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldScope)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldScope` | Extended scope for pane scaffolds. |

Known indirect subclasses [ExtendedPaneScaffoldPaneScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldPaneScope), [ThreePaneScaffoldPaneScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ThreePaneScaffoldPaneScope), [ThreePaneScaffoldScope](https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ThreePaneScaffoldScope)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ExtendedPaneScaffoldPaneScope` | Extended scope for the panes of pane scaffolds. |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ThreePaneScaffoldPaneScope` | Scope for the panes of `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)`. |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/ThreePaneScaffoldScope` | Scope for the panes of `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)`. |

*** ** * ** ***

The base scope of pane scaffolds, which provides scoped functions that supported by pane scaffolds.

## Summary

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).paneExpansionDraggable(androidx.compose.material3.adaptive.layout.PaneExpansionState,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneExpansionState, minTouchTargetSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource, semanticsProperties: (https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` The modifier that should be applied on a drag handle composable so the drag handle can be dragged and operate on the provided `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneExpansionState` properly. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/ExperimentalMaterial3AdaptiveApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).paneMargins(kotlin.Array)(vararg insets: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers)` This modifier specifies the associated pane's margins according to the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` as insets. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/ExperimentalMaterial3AdaptiveApi @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).paneMargins(androidx.compose.foundation.layout.PaddingValues,kotlin.Array)( fixedMargins: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, vararg insets: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers )` This modifier specifies the associated pane's margins according to specified fixed margins and the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` as insets, if any. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredHeight(androidx.compose.ui.unit.Dp)(height: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` This modifier specifies the preferred height for a pane in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`s, and the pane scaffold implementation will try its best to respect this height when the associated pane is rendered as a reflowed or a levitated pane. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredHeight(kotlin.Float)( proportion: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` This modifier specifies the preferred height for a pane as a proportion of the overall scaffold height. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredWidth(kotlin.Float)(proportion: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` This modifier specifies the preferred width for a pane as a proportion of the overall scaffold width. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredWidth(androidx.compose.ui.unit.Dp)(width: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` This modifier specifies the preferred width for a pane in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`s, and the pane scaffold implementation will try its best to respect this width when the associated pane is rendered as a fixed pane, i.e., a pane that are not stretching to fill the remaining spaces. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/saveable/SaveableStateHolder` | `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#saveableStateHolder()` The saveable state holder to save pane states across their visibility life-cycles. | Cmn |

## Public functions

### Modifier.paneExpansionDraggable

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/PaneScaffold.kt+function:paneExpansionDraggable)

```
fun Modifier.paneExpansionDraggable(
    state: PaneExpansionState,
    minTouchTargetSize: Dp,
    interactionSource: MutableInteractionSource,
    semanticsProperties: (SemanticsPropertyReceiver.() -> Unit)? = null
): Modifier
```

The modifier that should be applied on a drag handle composable so the drag handle can be dragged and operate on the provided `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneExpansionState` properly. By default this modifier supports two types of user interactions:

1. Dragging the handle horizontally within the pane scaffold.

2. Accessibility actions provided via `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).paneExpansionDraggable(androidx.compose.material3.adaptive.layout.PaneExpansionState,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`.

Besides that, this modifier also sets up other necessary behaviors of a pane expansion drag handle, like excluding system gestures and ensuring minimum touch target size.

See usage samples at:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material3.LocalMinimumInteractiveComponentSize
import androidx.compose.material3.VerticalDragHandle
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val interactionSource = remember { MutableInteractionSource() }
VerticalDragHandle(
    modifier =
        Modifier.paneExpansionDraggable(
            state,
            LocalMinimumInteractiveComponentSize.current,
            interactionSource,
        ),
    interactionSource = interactionSource,
)
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneExpansionState` | the `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneExpansionState` that controls the pane expansion of the associated pane scaffold |
| `minTouchTargetSize: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | the minimum touch target size of the drag handle |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` to address user interactions |
| `semanticsProperties: (https://developer.android.com/reference/kotlin/androidx/compose/ui/semantics/SemanticsPropertyReceiver.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | the optional semantics setup working with accessibility services; a default implementation will be used if nothing is provided. |

### Modifier.paneMargins

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/PaneScaffold.kt+function:paneMargins) Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.3.0)

```
@ExperimentalMaterial3AdaptiveApi
@Composable
fun Modifier.paneMargins(vararg insets: RectRulers): Modifier
```

This modifier specifies the associated pane's margins according to the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` as insets. Note that if multiple inset rulers are provided, the scaffold will decide the actual margins by taking the union of these insets - i.e. the one creating the largest margins will be used.

| Parameters |
|---|---|
| `vararg insets: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` | the insets the pane wants to respect. |

### Modifier.paneMargins

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/PaneScaffold.kt+function:paneMargins) Added in [1.3.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.3.0)

```
@ExperimentalMaterial3AdaptiveApi
@Composable
fun Modifier.paneMargins(
    fixedMargins: PaddingValues,
    vararg insets: RectRulers
): Modifier
```

This modifier specifies the associated pane's margins according to specified fixed margins and the provided `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` as insets, if any. Note that the scaffold will decide the actual margins by taking the union of the fixed margins and the provided insets - i.e. the one creating the largest margins will be used.

| Parameters |
|---|---|
| `fixedMargins: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues` | fixed margins to use for the pane; note that the margins will only be applied against the pane scaffold's bounds - for example if the scaffold is showing a dual-pane layout, in common situations, the spacer size between two panes won't be decided by either the left pane's right margin or the right pane's left margin, instead, `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective#horizontalPartitionSpacerSize()` will be used. |
| `vararg insets: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/RectRulers` | the insets the pane wants to respect. |

### Modifier.preferredHeight

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/PaneScaffold.kt+function:preferredHeight) Added in [1.2.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.2.0)

```
fun Modifier.preferredHeight(height: Dp): Modifier
```

This modifier specifies the preferred height for a pane in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`s, and the pane scaffold implementation will try its best to respect this height when the associated pane is rendered as a reflowed or a levitated pane. In case the modifier is not set or set to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp#Unspecified()`, the default preferred heights provided by `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective` are supposed to be used.

Note that the preferred height may not be applied when the associated pane is an expanded pane so it stretches to fill the available height, or when there are hinges to avoid intersecting with the scaffold, so the pane will be shrunk or expanded to respect the hinge areas.

Also note that if multiple `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredHeight(androidx.compose.ui.unit.Dp)` modifiers are applied, the last applied one will override all the previous settings.

```kotlin
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.ui.Modifier

AnimatedPane(
    modifier =
        Modifier.preferredWidth(preferredWidth).preferredHeight(preferredHeight).then(modifier)
) {
    content()
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective#defaultPanePreferredHeight()` |   |

### Modifier.preferredHeight

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/PaneScaffold.kt+function:preferredHeight) Added in [1.2.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.2.0)

```
fun Modifier.preferredHeight(
    proportion: @FloatRange(from = 0.0, to = 1.0) Float
): Modifier
```

This modifier specifies the preferred height for a pane as a proportion of the overall scaffold height. The value is a float ranging from 0.0 to 1.0.

The pane scaffold implementation will endeavor to respect this height when the associated pane is rendered in its `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneAdaptedValue.Reflowed` or `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneAdaptedValue.Levitated` state.

If this modifier is not set, the default preferred height defined by `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective#defaultPanePreferredHeight()` will be used.

Note that the preferred height may not be applied when the associated pane is an expanded pane so it stretches to fill the available height, or when there are hinges to avoid intersecting with the scaffold, so the pane will be shrunk or expanded to respect the hinge areas.

Also note that if multiple `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredHeight(androidx.compose.ui.unit.Dp)` modifiers are applied, the last applied one will override all the previous settings.

```kotlin
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.ui.Modifier

AnimatedPane(
    modifier =
        Modifier.preferredWidth(preferredWidthInProportion)
            .preferredHeight(preferredHeightInProportion)
            .then(modifier)
) {
    content()
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective#defaultPanePreferredHeight()` |   |

### Modifier.preferredWidth

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/PaneScaffold.kt+function:preferredWidth) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.0.0)

```
fun Modifier.preferredWidth(proportion: @FloatRange(from = 0.0, to = 1.0) Float): Modifier
```

This modifier specifies the preferred width for a pane as a proportion of the overall scaffold width. The value is a float ranging from 0.0 to 1.0.

The pane scaffold implementation will endeavor to respect this width when the associated pane is rendered as a fixed pane, i.e., a pane that is not stretching to fill the remaining spaces.

If this modifier is not set, the default preferred width defined by `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective#defaultPanePreferredWidth()` will be used.

Note that the preferred width may not be applied when the associated pane has a higher priority than the rest of panes (for example, primary pane v.s. secondary pane) so it stretches to fill the available width, or when there are hinges to avoid intersecting with the scaffold, so the pane will be shrunk or expanded to respect the hinge areas.

Also note that if multiple `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredWidth(androidx.compose.ui.unit.Dp)` modifiers are applied, the last applied one will override all the previous settings.

```kotlin
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.ui.Modifier

AnimatedPane(
    modifier =
        Modifier.preferredWidth(preferredWidthInProportion)
            .preferredHeight(preferredHeightInProportion)
            .then(modifier)
) {
    content()
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective#defaultPanePreferredWidth()` |   |

### Modifier.preferredWidth

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/PaneScaffold.kt+function:preferredWidth) Added in [1.2.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.2.0)

```
fun Modifier.preferredWidth(width: Dp): Modifier
```

This modifier specifies the preferred width for a pane in `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`s, and the pane scaffold implementation will try its best to respect this width when the associated pane is rendered as a fixed pane, i.e., a pane that are not stretching to fill the remaining spaces. In case the modifier is not set or set to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp#Unspecified()`, the default preferred widths provided by `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective` are supposed to be used.

Note that the preferred width may not be applied when the associated pane has a higher priority than the rest of panes (for example, primary pane v.s. secondary pane) so it stretches to fill the available width, or when there are hinges to avoid intersecting with the scaffold, so the pane will be shrunk or expanded to respect the hinge areas.

Also note that if multiple `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldScope#(androidx.compose.ui.Modifier).preferredWidth(androidx.compose.ui.unit.Dp)` modifiers are applied, the last applied one will override all the previous settings.

```kotlin
import androidx.compose.material3.adaptive.layout.AnimatedPane
import androidx.compose.ui.Modifier

AnimatedPane(
    modifier =
        Modifier.preferredWidth(preferredWidth).preferredHeight(preferredHeight).then(modifier)
) {
    content()
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/layout/PaneScaffoldDirective#defaultPanePreferredWidth()` |   |

## Public properties

### saveableStateHolder

Cmn Added in [1.2.0](https://developer.android.com/jetpack/androidx/releases/compose-material3-adaptive#1.2.0)

```
val saveableStateHolder: SaveableStateHolder
```

The saveable state holder to save pane states across their visibility life-cycles. The default pane implementations like `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)` are supposed to use it to store states.