Mithilfe von Schaltflächen können Benutzer mit einem einzigen Tastendruck Aktionen ausführen und Entscheidungen treffen.
Sie (Schaltflächen) kommunizieren die Aktionen, die Benutzer ausführen können. Es wird von Ihrer Benutzeroberfläche an folgenden Stellen platziert:
- Modale Fenster
- Formen
- Karten
- Symbolleisten
- Grundlegende Schaltfläche
Den Button gibt es in 3 Varianten: Text (Standard), enthalten, Und skizziert.
import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function BasicButtons() { return ( Text Contained Outlined ); } Textschaltfläche
Textschaltflächen werden für weniger ausgeprägte Aktionen verwendet, einschließlich solcher in Kartendialogen. Bei Karten helfen uns die Textschaltflächen dabei, den Schwerpunkt auf den Karteninhalt zu legen.
import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function TextButtons() { return ( Primary Disabled Link ); } Enthaltener Knopf
Die enthaltenen Schaltflächen sind stark hervorgehoben und zeichnen sich durch die Verwendung von Erhebungen und Füllungen aus. Es enthält Aktionen, die hauptsächlich in unserer App verwendet werden.
import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function ContainedButtons() { return ( Contained Disabled Link ); } Sie können die Höhe mit der Stütze „Höhe deaktivieren“ entfernen.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Umrissener Knopf
Umrandete Schaltflächen sind Schaltflächen mit mittlerer Betonung. Sie enthalten wesentliche Aktionen, jedoch nicht die Hauptaktion in der App.
Umrandete Schaltflächen sind die untergeordnete Alternative zur Aufnahme der Schaltflächen oder eine stärker betonte Alternative zu den Textschaltflächen.
import * as React from 'react'; import Button from '@mui/material/Button'; import Stack from '@mui/material/Stack'; export default function OutlinedButtons() { return ( Primary Disabled Link ); } Umgang mit Klicks
Alle Komponenten akzeptieren eine onClick Handler, der auf die Wurzel angewendet wird DOM Element.
{ alert('clicked'); }} > Click me Hinweis: In der Dokumentation wird die Erwähnung der nativen Requisiten in unserem API-Abschnitt der Komponenten vermieden.
Farbe
import * as React from 'react'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; export default function ColorButtons() { return ( Secondary Success Error ); } Darüber hinaus können Sie mithilfe der Standard-Schaltflächenfarben benutzerdefinierte Farben hinzufügen oder nicht benötigte Farben deaktivieren.
Größe
Verwenden Sie diese Eigenschaft für größere oder kleinere Schaltflächen.
Schaltfläche „Hochladen“.
import * as React from 'react'; import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import IconButton from '@mui/material/IconButton'; import PhotoCamera from '@mui/icons-material/PhotoCamera'; import Stack from '@mui/material/Stack'; const Input = styled('input')({ display: 'none', }); export default function UploadButtons() { return ( Upload ); } Schaltflächen mit Beschriftung und Symbol
Manchmal möchten Sie möglicherweise Symbole für bestimmte Schaltflächen haben, um die Benutzeroberfläche der Anwendung zu verbessern, da Logos für uns einfacher sind als einfacher Text.
Zum Beispiel, Wenn wir die Schaltfläche löschen möchten, sollten Sie sie mit einem Mülleimersymbol kennzeichnen.
import * as React from 'react'; import Button from '@mui/material/Button'; import DeleteIcon from '@mui/icons-material/Delete'; import SendIcon from '@mui/icons-material/Send'; import Stack from '@mui/material/Stack'; export default function IconLabelButtons() { return ( <button variant="outlined" starticon="{}"> Delete </button><button variant="contained" endicon="{}"> Send ); } </button> Symbolschaltfläche
Symbolschaltflächen finden Sie in Symbolleisten und App-Leisten. Symbole eignen sich für Umschalttasten, mit denen die Auswahlmöglichkeiten aktiviert oder deaktiviert werden können. Zum Beispiel das Hinzufügen oder Entfernen eines Artikels vom Etikett.
import * as React from 'react'; import IconButton from '@mui/material/IconButton'; import Stack from '@mui/material/Stack'; import DeleteIcon from '@mui/icons-material/Delete'; import AlarmIcon from '@mui/icons-material/Alarm'; import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; export default function IconButtons() { return ( ); } Größen
Verwenden Sie die Größe-Requisite für größere oder kleinere Symbole in der Schaltfläche.
import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import DeleteIcon from '@mui/icons-material/Delete'; export default function IconButtonSizes() { return ( ); } Farben
Verwenden Sie die Farbstütze, um die Farbpalette des Themas auf die Komponente anzuwenden.
import * as React from 'react'; import Stack from '@mui/material/Stack'; import IconButton from '@mui/material/IconButton'; import Fingerprint from '@mui/icons-material/Fingerprint'; export default function IconButtonColors() { return ( ); } Anpassung
Nachfolgend finden Sie Beispiele für die Anpassung unserer Komponente.
Schaltfläche „Laden“.
Die Ladeschaltflächen können den Ladestatus anzeigen und Interaktionen der Schaltfläche deaktivieren.
import * as React from 'react'; import LoadingButton from '@mui/lab/LoadingButton'; import SaveIcon from '@mui/icons-material/Save'; import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( Submit Fetch data <loadingbutton loading loadingposition="start" starticon="{}" variant="outlined"> Save ); } </loadingbutton> Schalten Sie die Ladeschaltfläche um, um den Übergang zwischen unabhängigen Positionen anzuzeigen.
Komplexer Knopf
Symbolschaltflächen, Textschaltflächen, enthaltene Schaltflächen und schwebende Aktionsschaltflächen sind in einer einzigen Komponente integriert, die als ButtonBase bezeichnet wird.
Sie können Komponenten auf niedrigerer Ebene verwenden, um benutzerdefinierte Interaktionen zu erstellen.
Routing-Bibliotheken von Drittanbietern
Das Navigieren durch den Client ohne eine genaue HTTP-Reise zum Server ist ein einzigartiger Anwendungsfall. Die ButtonBase-Komponente stellt Komponenteneigenschaften zur Handhabung des Anwendungsfalls bereit.
Grenzen
ButtonBase setzt die Komponente pointer-events: none; auf die Schaltfläche „Deaktivieren“, die das Erscheinen des deaktivierten Cursors verhindert.
Wenn Sie verwenden möchten 'nicht erlaubt' , Sie haben zwei Möglichkeiten:
Nur CSS: Sie können den Zeigerereignisstil im deaktivierten Zustand von entfernen Element:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , Obwohl,
Sie sollten pointer-events: none; wenn Sie Tooltips für deaktivierte Elemente anzeigen mussten.
Wenn Sie etwas anderes als das Schaltflächenelement rendern, ändert sich der Cursor nicht. Zum Beispiel ein Link Element.
DOM-Änderung. Sie können die Schaltfläche umbrechen:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Es kann jedes Element unterstützen, zum Beispiel einen Link Element.
ungestylt
Die Komponente wird mit der ungestylten Version geliefert. Es ist ideal für umfangreiche Optimierungen und die Reduzierung der Bundle-Größe.
API
Wie verwende ich die Schaltflächenkomponente in ReactJS?
Mithilfe von Schaltflächen können Benutzer mit einem einzigen Tastendruck ihre Aktionen ausführen und Entscheidungen treffen. Diese Komponente steht uns für React UI-Inhalte zur Verfügung und ist sehr einfach zu integrieren. Wir können die Schaltflächenkomponente in ReactJS verwenden, indem wir den folgenden Ansatz verwenden.
React-App erstellen und Module installieren:
Schritt 1: Erstellen Sie eine React-Anwendung, indem Sie den folgenden Befehl verwenden:
npx create-react-app foldername
Schritt 2: Nachdem Sie den Projektordner erstellt und den Namen des Ordners angegeben haben, navigieren Sie mit dem folgenden Befehl darin:
cd foldername
Schritt 3: Installiere das Material-UI Modul mit dem folgenden Befehl, nachdem Sie die ReactJS-Anwendung erstellt haben:
Was ist die Desktop.ini?
npm install @material-ui/core
Projektstruktur: Es wird wie folgt aussehen.
Projektstruktur
App.js: Jetzt müssen Sie den folgenden Code in schreiben App.js Datei.
Hier ist die App die Standardkomponente, die wir in unseren Code geschrieben haben.
JavaScript
import React from 'react'; import Button from '@material-ui/core/Button'; const App = () => { return ( <h3>How to use Button Component in ReactJS?</h3> <br> Default Button Primary Button Secondary Button Disabled Button Link Button ); } export default App; Schritte zum Ausführen der Anwendung:
Führen Sie die Anwendung aus, indem Sie den Befehl aus dem Stammverzeichnis des Projekts verwenden:
npm start
Ausgabe: Öffnen Sie nun Ihren Browser und gehen Sie zu http://localhost:3000/. Sie können die folgende Ausgabe sehen:
