# Popup

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/ui/window/Popup.composable#Popup(androidx.compose.ui.window.PopupPositionProvider,kotlin.Function0,androidx.compose.ui.window.PopupProperties,kotlin.Function0)( popupPositionProvider: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupPositionProvider, onDismissRequest: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Opens a popup with the given content. | Cmn android |
| `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/ui/window/Popup.composable#Popup(androidx.compose.ui.Alignment,androidx.compose.ui.unit.IntOffset,kotlin.Function0,androidx.compose.ui.window.PopupProperties,kotlin.Function0)( alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment, offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset, onDismissRequest: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Opens a popup with the given content. | Cmn android |

## Functions

### Popup

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

```
@Composable
fun Popup(
    popupPositionProvider: PopupPositionProvider,
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit
): Unit
```

Opens a popup with the given content.

The popup is positioned using a custom `https://developer.android.com/reference/kotlin/androidx/compose/ui/window/package-summary#Popup(androidx.compose.ui.window.PopupPositionProvider,kotlin.Function0,androidx.compose.ui.window.PopupProperties,kotlin.Function0)`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.material3.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntRect
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Popup
import androidx.compose.ui.window.PopupPositionProvider

val dropdownPopupPositioner = remember {
    object : PopupPositionProvider {
        override fun calculatePosition(
            anchorBounds: IntRect,
            windowSize: IntSize,
            layoutDirection: LayoutDirection,
            popupContentSize: IntSize,
        ): IntOffset {
            // Position the popup below the anchor aligned horizontally with the anchor's
            // center.
            return IntOffset(
                x = anchorBounds.left + anchorBounds.width / 2,
                y = anchorBounds.top + anchorBounds.height * 2,
            )
        }
    }
}

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Box(modifier = Modifier.background(Color.LightGray).padding(10.dp)) {
        BasicText(text = "Anchor")

        Popup(popupPositionProvider = dropdownPopupPositioner) {
            Box(
                modifier =
                    Modifier.background(Color.Green, RoundedCornerShape(16.dp)).padding(10.dp),
                contentAlignment = Alignment.Center,
            ) {
                BasicText(text = "Popup")
            }
        }
    }
}
```

| Parameters |
|---|---|
| `popupPositionProvider: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupPositionProvider` | Provides the screen position of the popup. |
| `onDismissRequest: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Executes when the user clicks outside of the popup. |
| `properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties = PopupProperties()` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties` for further customization of this popup's behavior. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content to be displayed inside the popup. |

### Popup

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

```
@Composable
fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntOffset = IntOffset(0, 0),
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit
): Unit
```

Opens a popup with the given content.

A popup is a floating container that appears on top of the current activity. It is especially useful for non-modal UI surfaces that remain hidden until they are needed, for example floating menus like Cut/Copy/Paste.

The popup is positioned relative to its parent, using the `https://developer.android.com/reference/kotlin/androidx/compose/ui/window/package-summary#Popup(androidx.compose.ui.Alignment,androidx.compose.ui.unit.IntOffset,kotlin.Function0,androidx.compose.ui.window.PopupProperties,kotlin.Function0)` and `https://developer.android.com/reference/kotlin/androidx/compose/ui/window/package-summary#Popup(androidx.compose.ui.Alignment,androidx.compose.ui.unit.IntOffset,kotlin.Function0,androidx.compose.ui.window.PopupProperties,kotlin.Function0)`. The popup is visible as long as it is part of the composition hierarchy.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Popup

Box {
    val popupWidth = 200.dp
    val popupHeight = 50.dp
    val cornerSize = 16.dp

    Popup(alignment = Alignment.Center) {
        // Draw a rectangle shape with rounded corners inside the popup
        Box(
            Modifier.size(popupWidth, popupHeight)
                .background(Color.White, RoundedCornerShape(cornerSize))
        )
    }
}
```

| Parameters |
|---|---|
| `alignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment = Alignment.TopStart` | The alignment relative to the parent. |
| `offset: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/IntOffset = IntOffset(0, 0)` | An offset from the original aligned position of the popup. Offset respects the Ltr/Rtl context, thus in Ltr it will be added to the original aligned position and in Rtl it will be subtracted from it. |
| `onDismissRequest: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Executes when the user clicks outside of the popup. |
| `properties: https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties = PopupProperties()` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/window/PopupProperties` for further customization of this popup's behavior. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content to be displayed inside the popup. |