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é | Type | Description |
|---|---|---|
children | any | Contenu à restituer à l'intérieur du composant. |
class | string | Classes CSS personnalisées. |
| axis | `"horizontal" \ | "verticale" \ | "both"` | The axis to center the content on. |