Zentrierte Ansicht (CenteredView)

CenteredView ist eine Layout-Dienstprogramm-Komponente, die ihre untergeordneten Elemente innerhalb des übergeordneten Containers zentriert. Sie ist ideal für die Erstellung zentrierter Layouts mit einer optionalen maximalen Breite.

Verwendung

Importieren Sie CenteredView aus @firecms/ui und umschließen Sie den Inhalt, der zentriert werden soll. Geben Sie optional eine maximale Breite für den zentrierten Inhalt an oder machen Sie ihn zum Vollbild.

Grundlegende Zentrierte Ansicht

Demonstriert eine zentrierte Ansicht mit Standardeinstellungen.

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

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

Zentrierte Ansicht mit maximaler Breite

Zeigt eine zentrierte Ansicht mit einer festgelegten maximalen Breite.

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

Benutzerdefiniertes Styling der zentrierten Ansicht

Veranschaulicht, wie benutzerdefinierte Stile und Klassen auf die zentrierte Ansicht für ein einzigartiges Erscheinungsbild angewendet werden können.

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