Einführung

Ein schwebender, nicht-modaler Popup-Container, der erscheint, wenn ein Benutzer ein angehängtes Auslöserelement mit der Maus überfährt oder fokussiert. Er liefert leichtgewichtige kontextbezogene Informationen, reiche Vorschauen oder schnelle Aktionen, ohne die aktuelle Seite zu verlassen.

Die HoverCard-Komponente ist vollständig als hovercard-Block im Page Builder integriert und ermöglicht es Content-Autoren und Entwicklern, Auslöserelemente (wie Schaltflächen oder Textspannen) direkt innerhalb des CMS an detaillierte Vorschaufelder zu binden.

Verwendung über den CMS Page Builder (JSON)

Diese Beispiele veranschaulichen, wie Content-Editoren HoverCard-Vorschaufelder innerhalb von JSON-Seitenschemata (content/pages/*.json) binden und strukturieren.

1. Standard-Profilvorschau

Umschließt einen Schaltflächen-Auslöser mit einer schwebenden Karte, die eine schnelle Benutzerübersicht anzeigt, einschließlich Avatar, Name und Rolle.

{
  "type": "hovercard",
  "openDelay": 200,
  "closeDelay": 150,
  "positioning": "bottom",
  "trigger": [
    {
      "type": "button",
      "text": "About the Author",
      "variant": "outline"
    }
  ],
  "content": [
    {
      "type": "avatar",
      "name": "J. Chen"
    },
    {
      "type": "heading",
      "level": 4,
      "text": "Jules Chen"
    },
    {
      "type": "text",
      "text": "Lead Architect"
    }
  ]
}

2. Reicher Link-Kontext

Nutzt benutzerdefiniertes untergeordnetes JSX, um eine HoverCard an Inline-Text anzuhängen. Zeigt, wie benutzerdefinierter Kopftext und Beschreibungen injiziert werden können.

{
  "type": "hovercard",
  "openDelay": 300,
  "closeDelay": 100,
  "positioning": "top",
  "trigger": [
    {
      "type": "text",
      "text": "Hono framework"
    }
  ],
  "content": [
    {
      "type": "heading",
      "level": 4,
      "text": "Hono"
    },
    {
      "type": "text",
      "text": "Ultrafast web framework for the Edge."
    }
  ]
}

CMS-Konfigurationsreferenz

Diese Felder ordnen sich direkt den Sveltia-CMS-Blockeigenschaften unter public/admin/config.yml oder den Page-Builder-Konfigurationen zu:

Entwicklerhinweise & Barrierefreiheit

• Intelligente Verzögerte Hydration: Standardmäßig werden Auslöser und Karte als statisches HTML gerendert. Die HoverCard hydriert nur dann als Client-Insel, wenn "interactive": true bereitgestellt wird, wodurch innere klickbare Links ermöglicht werden.
• WAI-ARIA-Konformität: Im Hintergrund verwendet die Komponente standardmäßige aria-describedby-Verbindungen und verwaltet Fokusringe korrekt. Die schwebende Karte schließt korrekt, wenn die Escape-Taste gedrückt wird oder der Fokus die Auslösergrenzen verlässt.
• Anmutiges Fokus-Fallback: Da Hover-Ereignisse für Tastatur- und Screenreader-Benutzer nicht zugänglich sind, aktiviert sich die Karte auch bei Tastaturfokus (Tab) und stellt so Parität für Nicht-Maus-Interaktionen sicher.