Popover surface
Chrome shared by every tray menu / dropdown / on-screen-options
popover. Owns the corner radius, drop shadow, header / body / footer
slots, and a placement class the parent overlay layer uses to
position the surface. The component itself doesn't compute
coordinates — that's the parent's job.
With a footer
PopoverPlacement only emits a popover-<placement> CSS class. The
parent (overlay layer in app-ui) decides anchor coordinates and
flip behavior. Keeping placement math out of the surface means
storybook stories render deterministically without a viewport.
API
#![allow(unused)] fn main() { use ui_storybook::components::{ PopoverSurface, PopoverPlacement, MenuList, MenuRow, }; view! { <PopoverSurface placement=PopoverPlacement::BottomLeft width_px=300_u16 title="Choose camera" footer=ToChildren::to_children(|| view! { /* primary action */ }) > <MenuList label="Cameras"> /* … rows */ </MenuList> </PopoverSurface> } }
Placement classes
PopoverPlacement | CSS class |
|---|---|
TopLeft | popover-tl |
TopRight | popover-tr |
BottomLeft (default) | popover-bl |
BottomRight | popover-br |
Centered | popover-center |