Introduction

Un composant conteneur utilitaire qui centre ses éléments enfants de manière absolue à l'intérieur de son conteneur parent positionné en relatif le plus proche. Excellent pour le contenu superposé, les squelettes de chargement, les badges épinglés au centre, les cartes de mise en évidence et les bandeaux de page d'accueil.

Le composant AbsoluteCenter est entièrement intégré comme un bloc absoluteCenter dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer facilement les mises en page visuelles, les axes d'alignement et les comportements d'espacement directement dans le CMS.

Utilisation

Ces exemples illustrent comment les éditeurs de contenu lient et structurent des conteneurs absolus centrés.

1. Centrage sur les deux axes

Centre parfaitement les éléments imbriqués horizontalement et verticalement dans le contexte parent. Idéal pour les badges d'appel à l'action centralisés ou les superpositions de chargement de progression.

{
  "type": "absoluteCenter",
  "axis": "both",
  "children": [
    {
      "type": "badge",
      "text": "Centered Content",
      "colorPalette": "purple",
      "variant": "solid"
    }
  ]
}

2. Alignement horizontal uniquement

Épingle les éléments pour les centrer horizontalement (le long de l'axe X) tout en laissant la position verticale inchangée.

{
  "type": "absoluteCenter",
  "axis": "horizontal",
  "children": [
    {
      "type": "badge",
      "text": "Horizontal Only",
      "colorPalette": "blue",
      "variant": "outline"
    }
  ]
}

3. Alignement vertical uniquement

Épingle les éléments pour les centrer verticalement (le long de l'axe Y) tout en laissant la position horizontale inchangée.

{
  "type": "absoluteCenter",
  "axis": "vertical",
  "children": [
    {
      "type": "badge",
      "text": "Vertical Only",
      "colorPalette": "green",
      "variant": "subtle"
    }
  ]
}

Propriétés

Notes de développement et accessibilité

• Cible parent relative : Pour que AbsoluteCenter fonctionne correctement, son conteneur parent immédiat ou wrapper de mise en page doit avoir position: relative (ou un autre positionnement non statique) appliqué.
• Positionnement à accélération matérielle : Sous le capot, ce composant utilise des règles de translation CSS haute efficacité (transform: translate(-50%, -50%)) pour éviter tout flou de rendu sous-pixel ou problème de mise à l'échelle de police selon les densités de pixels d'écran.
• Ordre de l'arbre accessible : Le composant conserve l'ordre de lecture DOM natif pour les lecteurs d'écran. Il ne modifie pas les onglets de navigation au clavier ni les surlignages de contour d'accessibilité du contenu enfant interne.