Karte (Card)

Karten (Cards) sind Oberflächen, die Inhalte und Aktionen zu einem bestimmten Thema anzeigen. Sie sollten leicht nach relevanten und umsetzbaren Informationen gescannt werden können. Karten können für eine Vielzahl von Zwecken verwendet werden, einschließlich der Anzeige von Informationen, als klickbare Aktionen oder als interaktive Elemente der Benutzeroberfläche.

Verwendung

Importieren Sie Card aus @firecms/ui und umschließen Sie den Inhalt, den Sie auf der Karte anzeigen möchten. Sie können die Karte auch klickbar machen, indem Sie einen onClick-Handler bereitstellen.

Einfache Karte

Stellt die grundlegende Verwendung einer Karte zur Anzeige von Inhalten dar.

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

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

Klickbare Karte

Zeigt eine Karte mit einem onClick-Ereignis, wodurch sie sich ähnlich wie eine Schaltfläche verhält.

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

Benutzerdefiniertes Styling

Zeigt, wie zusätzliche Klassen oder Stile auf die Karte für ein benutzerdefiniertes Erscheinungsbild angewendet werden können.

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