Knapper giver brugerne mulighed for at foretage handlinger og træffe valg med et enkelt tryk.

De (knapper) kommunikerer de handlinger, som brugerne kan udføre. Den placeres af din brugergrænseflade på steder som nedenfor:

• Modale vinduer
• Formularer
• Kort
• Værktøjslinjer
• Grundlæggende knap

Knappen kommer i 3 varianter: tekst (standard), indeholdt, og skitseret.

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

Tekst knap

Tekstknapper bruges til mindre udtalte handlinger, inklusive dem i kortdialoger. I kort vil tekstknapperne hjælpe os med at bevare en vægt på kortindhold.

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

Indeholdt knap

Indeholdte knapper er fremhævede, kendetegnet ved brugen af ​​elevation og fyld. Den indeholder handlinger, der primært bruges i vores 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 ); } 

Du kan fjerne højden med den deaktivere Elevation prop.

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

Skitseret knap

Knapper med kontur er knapper med medium vægt. De indeholder væsentlige handlinger, men ikke hovedhandlingen i appen.

Knapper med kontur er det lavere alternativ til at indeholde knapperne eller et alternativ med højere vægt til tekstknapperne.

eksempler på operativsystemer

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

Håndtering af klik

Alle komponenter accepterer en påKlik handler, som anvendes på roden DOM element.

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

Bemærk: Dokumentationen undgår at nævne de oprindelige rekvisitter i vores API-sektion af komponenterne.

Farve

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

Derudover kan du ved at bruge standardknapfarverne tilføje brugerdefinerede eller deaktivere dem, du ikke har brug for.

Størrelse

Brug denne egenskab til større eller mindre knapper.

Upload knap

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

Knapper med etiket og ikon

Nogle gange vil du måske have ikoner for visse knapper for at forbedre brugeroplevelsen af ​​applikationen, da vi anerkender logoer lettere end almindelig tekst.

For eksempel, Hvis vi ønsker at slette knappen, skal du mærke den med et skraldespandsikon.

 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>

Ikon knap

Ikonknapper findes i værktøjslinjer og appbjælker. Ikoner er passende for skifteknapper, som gør det muligt at vælge eller fravælge valgene. Ligesom, tilføje eller fjerne ethvert element fra etiketten.

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

Størrelser

Brug størrelsesstøtten til større eller mindre ikon i knappen.

inorder gennemkøring

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

Farver

Brug farveprop til at anvende temafarvepaletten på komponenten.

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

Tilpasning

Nedenfor er eksempler på tilpasning af vores komponent.

Indlæsningsknap

Indlæsningsknapperne kan vise indlæsningstilstanden og deaktivere knappens interaktioner.

 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>

Skift indlæsningsknappen for at se overgangen mellem ikke-relaterede positioner.

Kompleks knap

Ikonknap, tekstknap, indeholdte knapper og flydende handlingsknapper er indbygget i en enkelt komponent, som kaldes ButtonBase.

Du kan tage en komponent på et lavere niveau for at skabe brugerdefinerede interaktioner.

Tredjeparts Routing-biblioteker

At navigere på klienten uden en nøjagtig HTTP-tur til serveren er en unik brugssag. ButtonBase-komponenten giver komponentegenskaber til at håndtere brugssagen.

Grænser

ButtonBase indstiller komponent pointer-hændelser: ingen; på deaktiveringsknappen, som forhindrer fremkomsten af ​​den deaktiverede markør.

Hvis du vil bruge 'ikke tilladt' , du har to muligheder:

postordre krydsning

Kun CSS: Du kan fjerne markørhændelsesstilen i deaktiveret tilstand element:

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

Selvom,

Du bør tilføje pointer-begivenheder: ingen; når du havde brug for at vise værktøjstip på deaktiverede elementer.

Hvis du gengiver noget andet end knapelementet, ændres markøren ikke. For eksempel et link element.

DOM ændring. Du kan pakke knappen ind:

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

Det kan understøtte ethvert element, for eksempel et link element.

ustylet

Komponenten kommer med den ustylede version. Den er ideel til at udføre tunge optimeringer og reducere bundtstørrelse.

API

Hvordan bruger man knapkomponenten i ReactJS?

Knapper giver brugerne mulighed for at foretage deres handlinger og træffe valg med et enkelt tryk. Denne komponent er tilgængelig for os til React UI-indhold, og den er meget nem at integrere. Vi kan bruge knapkomponent i ReactJS ved at bruge følgende fremgangsmåde.

Oprettelse af React-app og installation af moduler:

Trin 1: Byg en React-applikation ved at bruge nedenstående kommando:

 npx create-react-app foldername 

Trin 2: Efter oprettelse af projektmappen og navnet på mappen for at navigere i den ved at bruge den givne kommando:

 cd foldername 

Trin 3: Installer Materiale-UI modul ved hjælp af følgende kommando efter oprettelse af ReactJS-applikationen:

 npm install @material-ui/core 

Projektets struktur: Det vil se ud som følgende.

projektstruktur

fuld form ide

App.js: Nu skal du skrive nedenstående kode i App.js fil.

Her er appen standardkomponenten, hvor vi har skrevet i vores kode.

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; 

Trin til at køre programmet:

Kør programmet ved at bruge kommandoen fra projektets rodbibliotek:

 npm start 

Produktion: Åbn nu din browser og gå til http://localhost:3000/. Du kan se nedenstående output: