CenteredView

CenteredView è un componente di utilità per il layout che centra i suoi figli all’interno del contenitore padre. È ideale per creare layout centrati con una larghezza massima opzionale.

Utilizzo

Importa il CenteredView da @firecms/ui e avvolgi il contenuto che desideri centrare. Opzionalmente, specifica una larghezza massima per il contenuto centrato o rendilo a schermo intero.

CenteredView di base

Dimostra una vista centrata con impostazioni predefinite.

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

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

CenteredView con larghezza massima

Mostra una vista centrata con larghezza massima impostata.

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>
    );
}

Stile personalizzato della CenteredView

Illustra come stili e classi personalizzate possono essere applicati alla vista centrata per un aspetto unico.

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>
    );
}