1. Knopfknopf
Mit der Schaltfläche wird eine Sofortaktion gestartet.
2. Wann zu verwenden
Ein Operationsbefehl (oder eine Gruppe von Paketen) wird markiert und die entsprechende Geschäftslogik wird als Reaktion auf das Klickverhalten des Benutzers ausgelöst.
Wir bieten fünf Buttons im Ant Design an.
Haupttaste: Wird für den Hauptaktionspunkt verwendet. Ein Betriebsbereich kann nur eine Haupttaste haben.
Standardschaltfläche: Wird für eine Reihe von Aktionen ohne Priorität verwendet.
Gepunktete Schaltfläche: Wird häufig zum Hinzufügen von Vorgängen verwendet.
Textschaltfläche: Wird für die Aktionspunkte der niedrigsten Ebene verwendet.
Link-Schaltfläche: Wird im Allgemeinen für Links verwendet, also zum Navigieren zu einem Ort.
Und die vier Zustandsattribute werden in Verbindung mit dem oben Gesagten verwendet.
Gefährlich: Gefährliche Vorgänge wie das Löschen/Verschieben/Ändern von Berechtigungen erfordern im Allgemeinen eine zweite Bestätigung.
Ghost: Es wird an Orten mit komplexen Hintergrundfarben verwendet und häufig in Anzeigeszenarien wie der Homepage/Produktseite verwendet.
Deaktiviert: Wenn ein Aktionspunkt nicht verfügbar ist, ist im Allgemeinen eine Texterläuterung erforderlich.
Laden: Wird für asynchrone Vorgänge verwendet, um mehrfache Übermittlungen beim Warten auf Feedback zu vermeiden.
Der Komponentencode stammt von: Button Button – Ant Design
3. Vorbereitung vor der lokalen Überprüfung
Lesen Sie den Artikel [React Project + Antd Component-Demo: Hallo-World React Project + Antd Component-Demo: Hallo-World_Western Jin's No1 Blog-CSDN Blog ] und kopieren Sie den Code, der lokal in Button - Ant Design Alle Codes in App2.js , starten Sie den Code, sehen Sie sich das Phänomen an und ändern Sie den Code lokal.
4. Einfache Verwendung der lokalen Verifizierungsschaltfläche .
Kopieren Sie den in der Abbildung unten gezeigten Code, um die einfache Verwendung von Button zu verstehen. Erkennen Sie die fünf Arten von Tasten.
5. Sehen Sie sich die Stile der drei Knopfgrößen und deren Verwendung an
Kopieren Sie den in der Abbildung unten gezeigten Code, um die Stile der drei Schaltflächengrößen und deren Verwendung zu verstehen .
In diesem Artikel wird nur ein Teil der Komponente Button vorgestellt. Weitere Informationen finden Sie im offiziellen Dokument: Button Button - Ant Design