Met knoppen kunnen gebruikers met één tik acties ondernemen en keuzes maken.

Zij (knoppen) communiceren de acties die gebruikers kunnen uitvoeren. Het wordt door uw gebruikersinterface op plaatsen zoals hieronder geplaatst:

• Modale vensters
• Formulieren
• Kaarten
• Werkbalken
• Basisknop

De Knop is verkrijgbaar in 3 varianten: tekst (standaard), bevat, En geschetst.

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

Tekstknop

Tekstknoppen worden gebruikt voor minder uitgesproken acties, inclusief die in kaartdialogen. In kaarten helpen de tekstknoppen ons om de nadruk op de kaartinhoud te houden.

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

Bevatte knop

De aanwezige knoppen hebben een hoge nadruk en onderscheiden zich door het gebruik van hoogte en vulling. Het bevat acties die primair worden gebruikt in onze app.

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

U kunt de hoogte verwijderen met de optie Hoogte uitzetten.

 import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } 

Geschetste knop

Omlijnde knoppen zijn knoppen met gemiddelde nadruk. Ze bevatten essentiële acties, maar niet de hoofdactie in de app.

Omlijnde knoppen zijn het lagere alternatief om de knoppen te bevatten of een alternatief met een hogere nadruk op de tekstknoppen.

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

Klikken verwerken

Alle componenten accepteren een bij klikken handler die op de root wordt toegepast DOM element.

 { alert('clicked'); }} > Click me 

Opmerking: in de documentatie wordt vermeden de native rekwisieten te vermelden in onze API-sectie van de componenten.

Kleur

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

Bovendien kunt u, door de standaardknopkleuren te gebruiken, aangepaste kleuren toevoegen of de kleuren uitschakelen die u niet nodig hebt.

Maat

Gebruik deze eigenschap voor grotere of kleinere knoppen.

string java-indexof

Knop Uploaden

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

Knoppen met label en pictogram

Soms wilt u misschien pictogrammen voor bepaalde knoppen om de gebruikerservaring van de applicatie te verbeteren, omdat we logo's gemakkelijker herkennen dan platte tekst.

Bijvoorbeeld, Als we de knop willen verwijderen, moet u deze labelen met een vuilnisbakpictogram.

 import * as React from &apos;react&apos;; import Button from &apos;@mui/material/Button&apos;; import DeleteIcon from &apos;@mui/icons-material/Delete&apos;; import SendIcon from &apos;@mui/icons-material/Send&apos;; import Stack from &apos;@mui/material/Stack&apos;; export default function IconLabelButtons() { return ( <button variant="outlined" starticon="{}"> Delete </button><button variant="contained" endicon="{}"> Send ); } </button>

Pictogram knop

Pictogramknoppen zijn te vinden in werkbalken en app-balken. Pictogrammen zijn geschikt voor schakelknoppen waarmee de keuzes kunnen worden geselecteerd of gedeselecteerd. Zoals het toevoegen of verwijderen van een item van het label.

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

Maten

Gebruik de maatprop voor een groter of kleiner pictogram in de knop.

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

Kleuren

Gebruik kleurprop om het themakleurenpalet op de component toe te passen.

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

Maatwerk

Hieronder vindt u voorbeelden van het aanpassen van onze component.

Knop Laden

De laadknoppen kunnen de laadstatus weergeven en interacties van de knop uitschakelen.

 import * as React from &apos;react&apos;; import LoadingButton from &apos;@mui/lab/LoadingButton&apos;; import SaveIcon from &apos;@mui/icons-material/Save&apos;; import Stack from &apos;@mui/material/Stack&apos;; export default function LoadingButtons() { return ( Submit Fetch data <loadingbutton loading loadingposition="start" starticon="{}" variant="outlined"> Save ); } </loadingbutton>

Schakel de laadknop om de overgang tussen niet-gerelateerde posities te zien.

Complexe knop

Pictogramknop, tekstknop, ingesloten knoppen en zwevende actieknoppen zijn ingebouwd in een enkele component die ButtonBase wordt genoemd.

U kunt een component op een lager niveau gebruiken om aangepaste interacties te creëren.

Routeringsbibliotheken van derden

Navigeren door de client zonder een exacte HTTP-trip naar de server is een uniek gebruiksscenario. De ButtonBase-component biedt componenteigenschappen om de use-case af te handelen.

Grenzen

ButtonBase stelt de component pointer-events in: geen; op de uitschakelknop, die voorkomt dat de uitgeschakelde cursor verschijnt.

f films

Als je wilt gebruiken 'niet toegestaan' , heeft u twee opties:

Alleen CSS: U kunt de pointer-event-stijl verwijderen in de uitgeschakelde status element:

 .uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , 

Hoewel,

Je zou pointer-events moeten toevoegen: geen; wanneer u tooltips over uitgeschakelde elementen moest weergeven.

Als u iets anders dan het knopelement rendert, verandert de cursor niet. Een koppeling bijvoorbeeld element.

DOM-wijziging. Je kunt de knoop omwikkelen:

 <span style="{{" cursor: 'not allowed' }}> disabled </span> 

Het kan elk element ondersteunen, bijvoorbeeld een link element.

ongestyled

Het onderdeel wordt geleverd met de ongestylede versie. Het is ideaal voor het uitvoeren van zware optimalisaties en het verkleinen van de bundelgrootte.

API

Hoe gebruik ik de knopcomponent in ReactJS?

Met knoppen kunnen gebruikers met één tik hun acties uitvoeren en keuzes maken. Dit onderdeel is voor ons beschikbaar voor React UI-inhoud en is heel eenvoudig te integreren. We kunnen de knopcomponent in ReactJS gebruiken door de volgende aanpak te gebruiken.

Reageer-app maken en modules installeren:

Stap 1: Bouw een React-applicatie met behulp van de onderstaande opdracht:

 npx create-react-app foldername 

Stap 2: Na het aanmaken van de projectmap en de naam van de map om er doorheen te navigeren met behulp van de gegeven opdracht:

 cd foldername 

Stap 3: Installeer de Materiaal-UI module met behulp van de volgende opdracht, na het maken van de ReactJS-applicatie:

 npm install @material-ui/core 

Projectstructuur: Het zal er als volgt uitzien.

projectstructuur

App.js: Nu moet je de onderstaande code in het App.js bestand.

Hier is de app het standaardcomponent waarin we onze code hebben geschreven.

dubbel gekoppelde lijst

JavaScript

 import React from &apos;react&apos;; import Button from &apos;@material-ui/core/Button&apos;; const App = () =&gt; { return ( <h3>How to use Button Component in ReactJS?</h3> <br> Default Button Primary Button Secondary Button Disabled Button Link Button ); } export default App; 

Stappen om de applicatie uit te voeren:

Voer de applicatie uit met behulp van de opdracht vanuit de hoofdmap van het project:

 npm start 

Uitgang: Open nu uw browser en ga naar http://localhost:3000/. U kunt de onderstaande uitvoer zien: