CenteredView

CenteredView é um componente utilitário de layout que centraliza seus filhos dentro do contêiner pai. É ideal para criar layouts centralizados com uma largura máxima opcional.

Uso

Importe o CenteredView de @firecms/ui e envolva o conteúdo que deseja centralizar. Opcionalmente, especifique uma largura máxima para o conteúdo centralizado ou torne-o em tela cheia.

CenteredView básica

Demonstra uma visualização centralizada com configurações padrão.

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

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

CenteredView com largura máxima

Mostra uma visualização centralizada com largura máxima definida.

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 da CenteredView

Ilustra como estilos e classes personalizadas podem ser aplicados à visualização centralizada para uma aparência ú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>
    );
}