# VerticalDragHandle

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/VerticalDragHandle.composable#VerticalDragHandle(androidx.compose.ui.Modifier,androidx.compose.material3.DragHandleSizes,androidx.compose.material3.DragHandleColors,androidx.compose.material3.DragHandleShapes,androidx.compose.foundation.interaction.MutableInteractionSource)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, sizes: https://developer.android.com/reference/kotlin/androidx/compose/material3/DragHandleSizes, colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/DragHandleColors, shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/DragHandleShapes, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? )` [Material Design drag handle](https://m3.material.io/foundations/layout/understanding-layout/parts-of-layout#314a4c32-be52-414c-8da7-31f059f1776d) | Cmn |

## Functions

### VerticalDragHandle

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/DragHandle.kt+function:VerticalDragHandle)

```
@Composable
fun VerticalDragHandle(
    modifier: Modifier = Modifier,
    sizes: DragHandleSizes = VerticalDragHandleDefaults.sizes(),
    colors: DragHandleColors = VerticalDragHandleDefaults.colors(),
    shapes: DragHandleShapes = VerticalDragHandleDefaults.shapes(),
    interactionSource: MutableInteractionSource? = null
): Unit
```

[Material Design drag handle](https://m3.material.io/foundations/layout/understanding-layout/parts-of-layout#314a4c32-be52-414c-8da7-31f059f1776d)

A drag handle is a capsule-like shape that can be used by users to change component size and/or position by dragging. A typical usage of it will be pane expansion - when you split your screen into multiple panes, a drag handle is suggested to be used so users can drag it to change the proportion of how the screen is being split. Note that a vertically oriented drag handle is meant to convey horizontal drag motions.

```kotlin
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.systemGestureExclusion
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.VerticalDragHandle
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp

var offsetX by remember { mutableStateOf(0f) }
var screenSize by remember { mutableStateOf(IntSize.Zero) }
val density = LocalDensity.current

Box(
    modifier =
        Modifier.fillMaxSize().onGloballyPositioned { layoutCoordinates ->
            screenSize = layoutCoordinates.size
            if (offsetX == 0f) {
                offsetX = screenSize.width / 2f
            }
        }
) {
    Surface(
        modifier = Modifier.width(with(density) { offsetX.toDp() }).fillMaxHeight(),
        color = MaterialTheme.colorScheme.surfaceContainerHighest,
        shape = RoundedCornerShape(0.dp, 24.dp, 24.dp, 0.dp),
    ) {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.CenterEnd) {
            VerticalDragHandle(
                modifier =
                    Modifier.draggable(
                            orientation = Orientation.Horizontal,
                            state =
                                rememberDraggableState { delta ->
                                    offsetX =
                                        (offsetX + delta).coerceIn(
                                            with(density) { 48.dp.toPx() },
                                            screenSize.width.toFloat(),
                                        )
                                },
                        )
                        .systemGestureExclusion() // To avoid colliding with the back gesture
            )
        }
    }
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this drag handle. |
| `sizes: https://developer.android.com/reference/kotlin/androidx/compose/material3/DragHandleSizes = VerticalDragHandleDefaults.sizes()` | sizes of this drag handle; see `https://developer.android.com/reference/kotlin/androidx/compose/material3/VerticalDragHandleDefaults#sizes()` for the default values. |
| `colors: https://developer.android.com/reference/kotlin/androidx/compose/material3/DragHandleColors = VerticalDragHandleDefaults.colors()` | colors of this drag handle; see `https://developer.android.com/reference/kotlin/androidx/compose/material3/VerticalDragHandleDefaults#colors()` for the default values. |
| `shapes: https://developer.android.com/reference/kotlin/androidx/compose/material3/DragHandleShapes = VerticalDragHandleDefaults.shapes()` | shapes of this drag handle; see `https://developer.android.com/reference/kotlin/androidx/compose/material3/VerticalDragHandleDefaults#colors()` for the default values. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this drag handle. You can use this to change the drag handle's appearance or preview the drag handle in different states. Note that if `null` is provided, interactions will still happen internally. |