Papel (Paper)

El componente Paper (Papel) es un componente simple y versátil que se utiliza para mostrar contenido dentro de una superficie plana o elevada. Esto lo hace útil como bloque de construcción para varias secciones de la interfaz de usuario, como tarjetas, diálogos o paneles.

Uso

Para usar el componente Paper, impórtalo desde tus componentes. Puedes pasar elementos secundarios (children), un style (estilo) opcional y una prop className (clase CSS) opcional para estilos adicionales.

Papel básico

Ejemplo sencillo de uso del componente Paper para crear una superficie básica para contenido.

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

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

Papel personalizado

Ilustra cómo personalizar el componente Paper pasando las props style y 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>
    );
}