Introduction

Un conteneur popup flottant et non modal qui apparaît lorsqu'un utilisateur survole ou focalise un élément déclencheur attaché. Il fournit des informations contextuelles légères, des aperçus riches ou des actions rapides sans quitter la page actuelle.

Le composant HoverCard est entièrement intégré en tant que bloc hovercard dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de lier facilement des éléments déclencheurs (tels que des boutons ou des segments de texte) à des blocs d'aperçu détaillés directement dans le CMS.

Utilisation via le CMS Page Builder (JSON)

Ces exemples illustrent comment les éditeurs de contenu lient et structurent des blocs d'aperçu hovercard dans les schémas de page JSON (content/pages/*.json).

1. Aperçu de Profil Standard

Enveloppe un bouton déclencheur avec une carte flottante affichant un aperçu utilisateur rapide, incluant un avatar, un nom et un rôle.

{
  "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. Contexte de Lien Riche

Utilise un JSX enfant personnalisé pour attacher une HoverCard à du texte en ligne. Montre comment un texte d'en-tête et des descriptions personnalisés peuvent être injectés.

{
  "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."
    }
  ]
}

Référence de Configuration CMS

Ces champs correspondent directement aux propriétés de bloc Sveltia CMS sous public/admin/config.yml ou aux configurations du Page Builder :

Notes de Développement et Accessibilité

• Hydratation Retardée Intelligente : Par défaut, le déclencheur et la carte sont rendus en HTML statique. La HoverCard ne s'hydrate en îlot côté client que lorsque "interactive": true est fourni, permettant ainsi des liens internes cliquables.
• Conformité WAI-ARIA : Sous le capot, le composant utilise des connexions aria-describedby standard et gère correctement les anneaux de focus. La carte flottante se ferme correctement lorsque la touche Échap est pressée ou que le focus quitte les limites du déclencheur.
• Repli de Focus Élégant : Comme les événements de survol sont inaccessibles aux utilisateurs clavier et lecteurs d'écran, la carte s'active également au focus clavier (tabulation), assurant une parité pour les interactions sans souris.