AbsoluteCenter Centrado Absoluto
Layout
Presentacional
Introducción
Un componente utilitario para centrar contenido dentro de su contenedor padre.
Uso
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>
);
}
Constructor de Páginas CMS
Este componente está disponible como un bloque absoluteCenter en el Constructor de Páginas (content/pages/*.json):
{
"type": "absoluteCenter",
"axis": "both",
"children": [
{ "type": "badge", "text": "Centered Badge", "colorPalette": "purple", "variant": "solid" }
]
}
Propiedades
| Prop | Type | Description |
|---|---|---|
children | any | Contenido que se renderiza dentro del componente. |
class | string | Clases CSS personalizadas. |
| axis | `"horizontal" \ | "vertical" \ | "both"` | El eje sobre el cual centrar el contenido. |