Lade-Schaltfläche (LoadingButton)

Die Loading Button-Komponente wird verwendet, um eine aktionsfähige Schaltfläche mit integriertem Lade-Feedback anzuzeigen. Dies ist nützlich, um Benutzern sofortiges Feedback zu ihren Aktionen zu geben, die asynchrone Vorgänge erfordern.

Verwendung

Um LoadingButton zu verwenden, importieren Sie es mit den erforderlichen Props. Sie können loading, disabled, onClick, startIcon und andere Button-Props übergeben.

Einfacher Loading Button

Ein einfacher Loading Button, der den Ladezustand und das Standarderscheinungsbild zeigt.

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

export default function LoadingButtonBasicDemo() {
    const [loading, setLoading] = React.useState(false);

    const onClick = () => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    };

    return (
        <LoadingButton
            loading={loading}
            onClick={onClick}>
                Click Me
        </LoadingButton>
    );
}

Loading Button mit Start-Icon

Ein Loading-Button-Beispiel, das ein Start-Icon enthält, welches angezeigt wird, wenn sich die Schaltfläche nicht im Ladezustand befindet.

import React from "react";
import { AddIcon, LoadingButton } from "@firecms/ui";

export default function LoadingButtonWithIconDemo() {
    const [loading, setLoading] = React.useState(false);

    const onClick = () => {
        setLoading(true);
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    };

    return (
        <LoadingButton
            startIcon={<AddIcon size={"small"}/>}
            loading={loading}
            onClick={onClick}>
            Click Me
        </LoadingButton>
    );
}