Components / Popover

Popover

A controlled non-modal surface for rich content and compact tasks.

example.component.html

html

<aevko-popover label="Workspace options">
  <button aevkoPopoverTrigger>
    Open options
  </button>
  <p>
    Choose a workspace preference.
  </p>
  <button aevkoPopoverClose>
    Done
  </button>
</aevko-popover>

Installation

npx aevko-ui@latest add popover --yes

Source ownership

Customization

Project compact interactive content, bind open when coordinating application state and keep placement a presentational choice rather than a reading-order dependency.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label / id`	`string`	`required / 'aevko-popover'`	Accessible popup name and relationship id.
`open`	`model<boolean>`	`false`	Controlled visibility.
`side / align`	`union`	`'bottom' / 'center'`	Logical placement around the trigger.
`closeOnEscape`	`boolean`	`true`	Dismisses the non-modal surface with Escape.
`aevkoPopoverTrigger / aevkoPopoverClose`	`projected slots`	`empty`	Native opener and optional close action.

Accessibility contract

Accessibility

Included behavior

The trigger exposes popup, expanded and control relationships.
Escape dismisses the surface without trapping focus.

Your responsibility

Give the surface a meaningful label, keep focusable content in logical order and provide an explicit close path for longer tasks.

Back to all components