Card

Le card sono superfici che mostrano contenuto e azioni su un singolo argomento. Devono essere facili da scansionare per trovare informazioni rilevanti e azionabili. Le card possono essere utilizzate per un’ampia varietà di scopi, inclusi la visualizzazione di informazioni, come azioni cliccabili o come elementi interattivi dell’interfaccia.

Utilizzo

Importa la Card da @firecms/ui e avvolgi il contenuto che vuoi visualizzare sulla card. Puoi anche rendere la card cliccabile fornendo un handler onClick.

Card di base

Rappresenta l’utilizzo di base di una card per visualizzare contenuto.

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

export default function CardBasicDemo() {
    return (
        <Card className={"p-4"}>
            Content within a basic card.
        </Card>
    );
}

Card cliccabile

Mostra una card con un evento onClick, facendola comportare in modo simile a un pulsante.

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

export default function CardClickableDemo() {
    const handleClick = () => {
        console.log("Card clicked!");
    };

    return (
        <Card className={"p-4"} onClick={handleClick}>
            Clickable card content.
        </Card>
    );
}

Stile personalizzato

Dimostra come applicare classi o stili aggiuntivi alla card per un aspetto personalizzato.

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

export default function CardCustomStyleDemo() {
    const styles = {
        padding: '20px',
        color: "red",
        backgroundColor: '#f9f9f9',
        borderRadius: '8px',
        boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
    };

    return (
        <Card style={styles}>
            Card with custom styling.
        </Card>
    );
}