Superficie (Paper)

Il componente Paper è un componente semplice e versatile usato per mostrare contenuti all’interno di una superficie piatta o elevata. Questo lo rende utile come blocco di costruzione per varie sezioni dell’interfaccia come card, dialoghi o pannelli.

Utilizzo

Per usare il componente Paper, importalo dai tuoi componenti. Puoi passare figli, uno style opzionale e una prop className opzionale per stili aggiuntivi.

Paper di base

Esempio semplice di utilizzo del componente Paper per creare una superficie base per contenuti.

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

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

Paper personalizzato

Illustra come personalizzare il componente Paper passando le prop style e className.

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