Paper

Le composant Paper est un composant simple et polyvalent utilisé pour afficher du contenu sur une surface plate ou élevée. Cela le rend utile comme bloc de construction pour diverses sections d’interface comme des cartes, des dialogues ou des panneaux.

Utilisation

Pour utiliser le composant Paper, importez-le depuis vos composants. Vous pouvez passer des enfants, un style optionnel et une prop className optionnelle pour du style supplémentaire.

Paper de base

Exemple simple d’utilisation du composant Paper pour créer une surface de base pour le contenu.

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

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

Paper personnalisé

Illustre comment personnaliser le composant Paper en passant les props style et 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>
    );
}