MenuChevron Down
AbsoluteCenter Centrage Absolu - Docs - Artefact

AbsoluteCenter Centrage Absolu

Layout
Tier 3

Introduction

Un composant utilitaire pour centrer le contenu dans son conteneur parent.

Utilisation

Centered Content
import { AbsoluteCenter } from "../components/ui";

export default function MyPage() {
  return (
    <div
      style={{
        position: "relative",
        height: "200px",
        width: "200px",
        border: "1px solid black",
      }}
    >
      <AbsoluteCenter axis="both">Centered Content</AbsoluteCenter>
    </div>
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc absoluteCenter dans Page Builder (content/pages/*.json) :

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

Propriétés

PropriétéTypeDescription
childrenanyContenu à restituer à l'intérieur du composant.
classstringClasses CSS personnalisées.

| axis | `"horizontal" \ | "verticale" \ | "both"` | The axis to center the content on. |