Popover
Displays rich content in a portal, triggered by a button.
About
The Popover component is built with the help of Overlay from Material CDK and provides a flexible way to display complex content that appears when a trigger element is activated.
Installation
Run the following command to install the popover component:
Usage
popover-usage.ts
Default
A basic popover for setting dimensions.
popover-example-default.ts
Themed Variants
Showcase semantic colors for different contexts like info, success, and danger.
popover-example-colors.ts
Form & Rich Content
A more complex example including icons, labels, and action buttons.
popover-example-form.ts
API Reference
Helm API
The Popover directives provide the spartan/ui styling and behavior.
| Directive | Selector | Description |
|---|---|---|
| HlmPopover | hlm-popover | Main popover container. |
| HlmPopoverTrigger | [hlmPopoverTrigger] | Directive for the trigger element. |
| HlmPopoverContent | hlm-popover-content | The content displayed in the portal. |
| HlmPopoverPortal | *hlmPopoverPortal | Structural directive for the content portal. |