Popout Panel
ProFloating panel anchored to a trigger element in 4 positions and 3 alignments — for quick-view cards, mini forms and rich detail panels. A Popover preset: new code should use `sv-popover` with `SV_POPOUT_PRESET`; `sv-popout` stays supported until the next major.
</>sv-popout popoutpaneloverlayfloating
import { SvPopoutComponent } from '@styloviz-pro/overlays';Demo & usage
Basic usage
ProUsage example — open the gallery for the full interactive demo.
Pro
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Controlled, right-aligned
ProWhen to use
- Surfacing a rich, anchored panel from a trigger without a full modal.
- Quick-view cards, mini forms, detail previews and contextual menus.
- For simple text hints use a Tooltip; for blocking dialogs use a Modal.
- Choosing between the anchored surfaces: hover + nothing to click is a Tooltip; click + interactive content is a Popover; hover + interactive content is a Popover with `trigger="hover"` and `[interactive]="true"` (a hover card). Popout is not a fourth box — it is the Popover click box with a smaller placement vocabulary.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Controlled open state. |
| position | PopoutPosition | 'bottom' | Preferred opening position relative to the trigger. |
| align | PopoutAlign | 'start' | Alignment along the cross axis. |
| width | number | 'auto' | 'auto' | Fixed panel width in px or 'auto' (content-driven). |
| closeOnOutsideClick | boolean | true | Close on click outside the panel and trigger. |
| closeOnEscape | boolean | true | Close on Escape key. |
| offset | number | 8 | Gap between trigger edge and panel (px). |
| animate | boolean | true | Animate on open. |
| ariaLabel | string | 'Popout panel' | Accessible label for the floating dialog panel. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| openChange | boolean | Emitted when the panel opens or closes. |
Customization & theming
- Four positions (top/bottom/left/right) and three alignments, with `start`/`end` mirrored for RTL text.
- Placement arithmetic is shared with Popover, Dropdown Menu and Tooltip — conditional flip, viewport clamp, and correction for a transformed ancestor that has become the containing block.
- A trigger that is removed or collapses to nothing while the panel is open closes the popout, rather than leaving it anchored to something that is no longer there — watched on the trigger's size, so it happens at the collapse and not at the next scroll.
- Fixed `width` or content-driven `auto`.
- Smooth directional enter/exit animation that follows the resolved side (respects `prefers-reduced-motion`); toggle via `[animate]`.
- Toggle outside-click and Escape close, and `offset`.
- Responsive: the panel width is capped to the viewport on top of flip + clamp, so content-driven panels never overflow a small screen.
Best practices
- Do: In new code, write the Popover preset instead: `<sv-popover trigger="click" [interactive]="true" [autoFocus]="true" position="bottom" align="end">` (or spread `SV_POPOUT_PRESET`). `position` and `align` are spelled the same and go through the same engine, so nothing moves. The one difference to plan for: the preset keeps Tab inside the panel, where Popout lets it walk out.
- Do: Keep the panel focused on one task so it stays lightweight.
- Do: Let the panel flip and clamp to the viewport (handled) on small screens.
- Tip: Use `[open]` + `(openChange)` for controlled state, or call `toggle()`/`close()`.
Accessibility
- Trigger exposes aria-haspopup/aria-expanded/aria-controls.
- Panel is a labelled dialog (`ariaLabel`); focus moves to the first focusable element in it on open (the panel itself when there is none) and is deliberately not trapped — Tab can leave, because the page is not inert. On close it returns to the trigger unless the user already moved it elsewhere.
- Escape closes from anywhere, including inside the portaled panel.
Feedback on Popout Panel
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.