Knapper lar brukere ta handlinger og gjøre valg med ett enkelt trykk.
De (knapper) kommuniserer handlingene som brukere kan utføre. Den plasseres av brukergrensesnittet på steder som nedenfor:
- Modale vinduer
- Skjemaer
- Kort
- Verktøylinjer
- Grunnleggende knapp
Knappen kommer i 3 varianter: tekst (standard), inneholdt, og skissert.
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 ); } Tekstknapp
Tekstknapper brukes til mindre uttalte handlinger, inkludert de i kortdialoger. I kort vil tekstknappene hjelpe oss til å opprettholde en vekt på kortinnhold.
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 ); } Inneholdt knapp
Inneholdte knapper har høy vekt, kjennetegnet ved bruk av høyde og fyll. Den inneholder handlinger som primært brukes i appen vår.
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øyden med å deaktivere Elevation prop.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Skissert knapp
Knapper med omriss er knapper med middels vekt. De inneholder viktige handlinger, men ikke hovedhandlingen i appen.
Omrissede knapper er det lavere alternativet for å inneholde knappene eller et alternativ med høyere vekt til tekstknappene.
hva er tilfelle i sql
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åndtere klikk
Alle komponenter godtar en ved trykk handler som brukes på roten DOM element.
{ alert('clicked'); }} > Click me Merk: Dokumentasjonen unngår å nevne de opprinnelige rekvisittene i API-delen av komponentene.
Farge
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 ); } I tillegg, ved å bruke standard knappefarger, kan du legge til egendefinerte eller deaktivere alle du ikke trenger.
Størrelse
Bruk denne egenskapen for større eller mindre knapper.
Last opp-knapp
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 etikett og ikon
Noen ganger kan det være lurt å ha ikoner for enkelte knapper for å forbedre brukeropplevelsen til applikasjonen, siden vi anerkjenner logoer enklere enn ren tekst.
For eksempel, Hvis vi ønsker å slette knappen, bør du merke den med et søppelkasseikon.
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> Ikonknapp
Ikonknapper finnes i verktøylinjer og applinjer. Ikoner er passende for veksleknapper som lar valgene velges eller fjernes. Lik, legg til eller fjern 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
Bruk størrelsesrekvisitten for større eller mindre ikon i knappen.
inordergjennomgang
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 ( ); } Farger
Bruk fargeprop for å bruke temafargepaletten 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 av komponenten vår.
Lasteknapp
Lasteknappene kan vise lastestatusen og deaktivere interaksjoner med knappen.
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> Veksle på innlastingsknappen for å se overgangen mellom ikke-relaterte posisjoner.
Kompleks knapp
Ikonknapp, tekstknapp, inneholdte knapper og flytende handlingsknapper er innebygd i en enkelt komponent som kalles ButtonBase.
Du kan ta en komponent på lavere nivå for å lage tilpassede interaksjoner.
Tredjeparts rutingbiblioteker
Å navigere klienten uten en eksakt HTTP-tur til serveren er en unik brukstilfelle. ButtonBase-komponenten gir komponentegenskaper for å håndtere brukssaken.
Grenser
ButtonBase setter komponentpekerhendelsene: ingen; på deaktiveringsknappen, som forhindrer utseendet til den deaktiverte markøren.
Hvis du vil bruke 'ikke tillatt' , har du to alternativer:
kø og prioritert kø i java
Kun CSS: Du kan fjerne pekerhendelsesstilen i deaktivert tilstand element:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , Selv om,
Du bør legge til pekerhendelser: ingen; når du trengte å vise verktøytips på deaktiverte elementer.
Hvis du gjengir noe annet enn knappeelementet, vil ikke markøren endres. For eksempel en lenke element.
DOM endring. Du kan pakke inn knappen:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Den kan støtte et hvilket som helst element, for eksempel en lenke element.
ustylet
Komponenten kommer med den ustilte versjonen. Den er ideell for å gjøre tunge optimaliseringer og redusere buntstørrelsen.
API
Hvordan bruke knappekomponenten i ReactJS?
Knapper lar brukere ta sine handlinger og gjøre valg med ett enkelt trykk. Denne komponenten er tilgjengelig for oss for React UI-innhold, og den er veldig enkel å integrere. Vi kan bruke knappekomponent i ReactJS ved å bruke følgende tilnærming.
Opprette React-app og installere moduler:
Trinn 1: Bygg en React-applikasjon ved å bruke kommandoen nedenfor:
npx create-react-app foldername
Steg 2: Etter å ha opprettet prosjektmappen, og navnet på mappen for å navigere den ved å bruke den gitte kommandoen:
cd foldername
Trinn 3: Installer Material-UI modul ved å bruke følgende kommando, etter å ha opprettet ReactJS-applikasjonen:
npm install @material-ui/core
Prosjektstruktur: Det vil se ut som følgende.
prosjektstruktur
full form
App.js: Nå må du skrive koden nedenfor i App.js fil.
Her er appen standardkomponenten der vi har skrevet inn koden vår.
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; Trinn for å kjøre programmet:
Kjør programmet ved å bruke kommandoen fra rotkatalogen til prosjektet:
npm start
Produksjon: Åpne nå nettleseren og gå til http://localhost:3000/. Du kan se utgangen nedenfor:
