Vista centrada (CenteredView)

CenteredView (Vista centrada) es un componente de utilidad de diseño que centra a sus hijos dentro del contenedor principal. Es ideal para crear diseños centrados con un ancho máximo opcional.

Uso

Importa el CenteredView de @firecms/ui y envuelve el contenido que deseas centrar. Opcionalmente, especifica un ancho máximo para el contenido centrado o hazlo de pantalla completa.

Vista centrada básica

Muestra una vista centrada con la configuración predeterminada.

import React from "react";
import { CenteredView } from "@firecms/ui";

export default function CenteredViewBasicDemo() {
    return (
        <CenteredView>
            Basic centered view content.
        </CenteredView>
    );
}

Vista centrada de ancho máximo

Muestra una vista centrada con un ancho máximo establecido.

import React from "react";
import { CenteredView } from "@firecms/ui";

export default function CenteredViewMaxWidthDemo() {
    return (
        <CenteredView maxWidth="sm">
            Centered view content with a maximum width set.
        </CenteredView>
    );
}

Estilo personalizado de vista centrada

Ilustra cómo se pueden aplicar as clases y de estilos personalizados a la vista centrada para una apariencia única.

import React from "react";
import { CenteredView } from "@firecms/ui";

export default function CenteredViewCustomStyleDemo() {
    return (
        <CenteredView className="bg-red-200 dark:bg-red-900">
            Centered view content with custom styling.
        </CenteredView>
    );
}