Stylish UI/com.segnities007.stylishui.components.molecules/StylishPopover

StylishPopover

fun StylishPopover(trigger: @Composable () -> Unit, content: @Composable () -> Unit, modifier: Modifier = Modifier, expanded: Boolean, onExpandedChange: (Boolean) -> Unit, placement: PopoverPlacement = PopoverPlacement.Bottom, offset: DpOffset = DpOffset(0.dp, 4.dp), containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.floatingCornerRadius), border: BorderStroke? = BorderStroke( StylishTheme.dimensions.outlineWidth, MaterialTheme.colorScheme.outlineVariant, ), tonalElevation: Dp = 4.dp, shadowElevation: Dp = StylishTheme.dimensions.floatingElevation, width: Dp? = null, onDismissRequest: () -> Unit = { onExpandedChange(false) })

A popover — a click-triggered floating panel for rich content (forms, tables, filters, inline editing) — 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 or onDismissRequest (typically by tapping outside or pressing back). The popover is non-modal and anchored to the trigger element.

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

Anchoring limitation: the popup position is computed from the trigger's bounds while the popup is positioned relative to the root, so the trigger 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(
    trigger = {
        Button(onClick = { expanded = !expanded }) {
            Text("フィルター")
        }
    },
    expanded = expanded,
    onExpandedChange = { expanded = it },
    placement = PopoverPlacement.Bottom,
) {
    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

trigger

The anchor element that opens the popover when clicked. Rendered inside the wrapping Box.

content

The popover content shown in the floating panel.

modifier

Modifier applied to the Box that wraps trigger.

expanded

Whether the popover is currently shown.

onExpandedChange

Called with the new expanded state when the user toggles the popover. The caller should update expanded accordingly.

placement

Where the popover appears relative to the trigger. Defaults to PopoverPlacement.Bottom.

offset

Offset from the computed anchor position. Defaults to DpOffset(0.dp, 4.dp) (4 dp below the anchor for PopoverPlacement.Bottom).

containerColor

Background color of the popup surface. Defaults to MaterialTheme.colorScheme.surfaceContainerHigh.

contentColor

Default content color inside the popup. Defaults to MaterialTheme.colorScheme.onSurface.

shape

Shape of the popup surface. Defaults to RoundedCornerShape with StylishTheme.dimensions.floatingCornerRadius.

border

Optional BorderStroke drawn around the popup surface. Defaults to a hairline border using StylishTheme.dimensions.outlineWidth and MaterialTheme.colorScheme.outlineVariant.

tonalElevation

Tonal elevation of the popup surface. Defaults to 4 dp.

shadowElevation

Shadow elevation of the popup surface. Defaults to StylishTheme.dimensions.floatingElevation.

onDismissRequest

Called when the user requests dismissal (e.g. tapping outside or pressing back). Defaults to calling onExpandedChange(false).

StylishPopover

Testing

Parameters

See also