Popover
Generischer verankerter Overlay: Klick auf den Auslöser öffnet ein Panel mit freiem Slot-Inhalt — schließt bei Außenklick und Escape. Für reine Hover-Vorschau component.hover-card, für Menüs component.dropdown
Nutzt: ui.button
Beispiele
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| trigger * | string | — | Auslöser-Beschriftung |
| triggerVariant | string: primary | secondary | ghost | "secondary" | Auslöser-Stil |
| placement | string: bottom-start | bottom-end | top-start | top-end | "bottom-start" | Ausrichtung |
| title | string | "" | Panel-Titel |
* Pflicht-Prop
Events & Slots
Events:
⚡ open⚡ close — im Surface per on: {<event>: {action, params}} verdrahtbar.
Slot default:
akzeptiert ui.*, component.*, layout.*
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--popover-width | calc(var(--container-sm) * 0.6) |
--popover-background | var(--color-surface-overlay) |
--popover-border | var(--color-border-default) |
Genutzte Design-Tokens
LLM-Notizen
component.popover
Generischer verankerter Overlay: Klick auf den Auslöser-Knopf öffnet ein Panel mit freiem Slot-Inhalt; Außenklick/Escape schließen. Abgrenzung: component.hover-card = Hover-Vorschau, component.dropdown = Menüliste, component.tooltip = Kurztext.
Wichtige Props
trigger(Pflicht) +triggerVariant,placement(bottom-start|bottom-end|top-start|top-end),title.- Slot
default: Panel-Inhalt (beliebige Definitionen — Formulare, Listen, Text). - Events
open/close. Stellschrauben:--popover-width,--popover-background,--popover-border.
Beispiel-Node
{
"definition": "component.popover",
"props": { "trigger": "Filter", "title": "Ansicht filtern" },
"slots": { "default": [{ "definition": "component.form", "props": { "…": "…" } }] }
}