Superfície (Paper)

O componente Paper é um componente simples e versátil usado para exibir conteúdo dentro de uma superfície plana ou elevada. Isso o torna útil como bloco de construção para várias seções da interface como cards, diálogos ou painéis.

Uso

Para usar o componente Paper, importe-o dos seus componentes. Você pode passar filhos, um style opcional e uma prop className opcional para estilo adicional.

Paper básico

Exemplo simples de uso do componente Paper para criar uma superfície básica para conteúdo.

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

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

Paper personalizado

Ilustra como personalizar o componente Paper passando as props 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>
    );
}