Hinweis (Alert)

Hinweise (Alerts) werden verwendet, um Benutzern einen Status oder Feedback mitzuteilen. Sie weisen häufig auf Erfolge, Informationen, Warnungen oder Fehler hin.

Farbe

Die Eigenschaft color wird verwendet, um die Schweregradstufe des Hinweises zu definieren.

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

export default function AlertColorDemo() {
    return (
        <div className="space-y-4 w-full">
            <Alert color={"base"}>
                This is a simple alert.
            </Alert>
            <Alert color="error">
                This is an error alert.
            </Alert>
            <Alert color="warning">
                This is a warning alert.
            </Alert>
            <Alert color="info">
                This is an info alert.
            </Alert>
            <Alert color="success">
                This is a success alert.
            </Alert>
        </div>
    );
}

Größe

Die Eigenschaft size wird verwendet, um die Größe des Hinweises zu definieren.

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

export default function AlertSieDemo() {
    return (
        <div className="w-full space-y-4">
            <Alert size="small">
                This is an small alert.
            </Alert>
            <Alert size="medium">
                This is a medium alert.
            </Alert>
            <Alert size="large">
                This is a large alert.
            </Alert>
        </div>
    );
}

Ausblendbar

Hinweise können ausblendbar (dismissable) sein, wenn eine onDismiss-Callback-Funktion bereitgestellt wird.

import React, { useState } from "react";
import { Alert } from "@firecms/ui";

export default function DismissableAlertDemo() {
    const [visible, setVisible] = useState(true);
    return (
        <>
            {visible && (
                <Alert onDismiss={() => setVisible(false)} color="info">
                    This alert can be dismissed with the close button.
                </Alert>
            )}
        </>
    );
}

Aktions-Schaltfläche

Fügen Sie mit der Eigenschaft action ein interaktives Element in den Hinweis ein.

import React from "react";
import { Alert, Button } from "@firecms/ui";

export default function AlertActionButtonDemo() {
    return (
        <Alert
            color="success"
            action={<Button size="small">Undo</Button>}
        >
            This alert contains an action button.
        </Alert>
    );
}

Benutzerdefiniertes Styling

Übergeben Sie benutzerdefinierte CSS-Klassen oder -Stile mit den Eigenschaften className und style, um den Hinweis anzupassen.

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

export default function CustomStyleAlertDemo() {
    return (
        <Alert
            outerClassName="custom-class"
            style={{
                borderLeft: "4px solid #4ade80",
                color: "#fff",
                background: "repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px)"
            }}
            color="success"
        >
            This alert has custom styling.
        </Alert>
    );
}