Oberfläche (Paper)

Die Paper-Komponente ist eine einfache und vielseitige Komponente, die verwendet wird, um Inhalte auf einer flachen oder erhöhten Oberfläche anzuzeigen. Das macht sie als Baustein für verschiedene UI-Bereiche wie Karten, Dialoge oder Panels nützlich.

Verwendung

Um die Paper-Komponente zu verwenden, importieren Sie sie aus Ihren Komponenten. Sie können untergeordnete Elemente (children), eine optionale style-Eigenschaft und eine optionale className-Eigenschaft für zusätzliches Styling übergeben.

Einfaches Paper

Einfaches Beispiel für die Verwendung der Paper-Komponente, um eine grundlegende Oberfläche für Inhalte zu erstellen.

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

export default function PaperBasicDemo() {
    return (
        <Paper>
            This is a basic paper component.
        </Paper>
    );
}

Angepasstes Paper

Veranschaulicht, wie die Paper-Komponente durch Übergeben der Eigenschaften style und className angepasst wird.

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

export default function PaperCustomizedDemo() {
    const customStyle = {
        padding: "20px",
        backgroundColor: "#f5f5f5",
        borderRadius: "4px",
        boxShadow: "0 2px 4px rgba(0,0,0,.1)"
    };

    return (
        <Paper style={customStyle} className="my-custom-paper">
            This is a customized paper component.
        </Paper>
    );
}