StylishPopover

A popover — anchored floating content for arbitrary use (filters, calendars, help text) — the MUI Popover / Radix Popover counterpart.

Unlike com.segnities007.stylishui.components.atoms.StylishDropdownMenu, a popover is not menu-shaped, does not auto-close when its content is tapped, and shows no scrim: it is dismissed only through onExpandedChange (typically by tapping outside, which triggers the popup's dismiss request). Content is laid out in a ColumnScope on a rounded, outlined, elevated surface sized to width, centered horizontally under the anchor and placed offset below it.

The anchor is rendered by this composable inside an internal Box. The popup enters with a short fade + scale animation (StylishTheme.animation.durationShort) that snaps instead of tweening when the platform requests reduced motion (see isStylishReducedMotionEnabled).

Anchoring limitation: the popup position is computed from the anchor's bounds while the popup is positioned relative to its enclosing box, so the anchor must not be nested inside transformed containers (e.g. parents that change the coordinate space, such as graphicsLayer scale/rotation or scroll-transformed layouts) or the popup will drift off the anchor.

var expanded by remember { mutableStateOf(false) }
StylishPopover(
    expanded = expanded,
    onExpandedChange = { expanded = it },
    anchor = {
        Button(onClick = { expanded = !expanded }) {
            Text("フィルター")
        }
    },
) {
    Text("カテゴリ", style = MaterialTheme.typography.titleSmall)
    Text("写真のみ表示", style = MaterialTheme.typography.bodyMedium)
}

Testing

The popup surface carries the default test tag stylish_popover for UI tests. Callers can override it by passing their own Modifier.testTag(...) in modifier.

Parameters

See also