CenteredView

CenteredView est un composant utilitaire de mise en page qui centre ses enfants dans le conteneur parent. C’est idéal pour créer des mises en page centrées avec une largeur maximale optionnelle.

Utilisation

Importez le CenteredView depuis @firecms/ui et enveloppez le contenu que vous souhaitez centrer. Optionnellement, spécifiez une largeur maximale pour le contenu centré ou rendez-le plein écran.

Vue centrée de base

Démontre une vue centrée avec les paramètres par défaut.

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

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

Vue centrée avec largeur maximale

Montre une vue centrée avec une largeur maximale définie.

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

Vue centrée avec style personnalisé

Illustre comment des styles et classes personnalisés peuvent être appliqués à la vue centrée pour une apparence unique.

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