Gumbi uporabnikom omogočajo izvajanje dejanj in izbiro z enim dotikom.
Ti (gumbi) sporočajo dejanja, ki jih uporabniki lahko izvedejo. Vaš uporabniški vmesnik ga postavi na mesta, kot je spodaj:
- Modalna okna
- Obrazci
- kartice
- Orodne vrstice
- Osnovni gumb
Gumb je na voljo v treh različicah: besedilo (privzeto), vsebovano, in orisano.
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 ); } Besedilni gumb
Besedilni gumbi se uporabljajo za manj izrazita dejanja, vključno s tistimi v pogovornih oknih kartic. Na karticah nam bodo besedilni gumbi pomagali ohraniti poudarek na vsebini kartice.
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 ); } Vsebovani gumb
Vsebovani gumbi so močno poudarjeni, odlikuje pa jih uporaba višine in zapolnitve. Vsebuje dejanja, ki se primarno uporabljajo v naši aplikaciji.
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 ); } Višino lahko odstranite z onemogočanjem Elevation prop.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Orisani gumb
Obrobljeni gumbi so srednje poudarjeni gumbi. Vsebujejo bistvena dejanja, ne pa tudi glavnega dejanja v aplikaciji.
primerjaj z nizi v Javi
Ocrtani gumbi so nižja alternativa, ki vsebuje gumbe, ali bolj poudarjena alternativa besedilnim gumbom.
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 ); } Ravnanje s kliki
Vse komponente sprejemajo an onClick upravljalnik, ki se uporablja za koren DOM element.
{ alert('clicked'); }} > Click me Opomba: Dokumentacija ne omenja domačih rekvizitov v našem razdelku API komponent.
barva
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 ); } Poleg tega lahko z uporabo privzetih barv gumbov dodate po meri ali onemogočite tiste, ki jih ne potrebujete.
Velikost
Uporabite to lastnost za večje ali manjše gumbe.
Gumb za nalaganje
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 ); } Gumbi z oznako in ikono
Včasih boste morda želeli imeti ikone za določene gumbe, da bi izboljšali UX aplikacije, saj prepoznamo logotipe lažje kot golo besedilo.
na primer Če želimo izbrisati gumb, ga označite z ikono smetnjaka.
kako izbrisati stolpec v postgresql
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> Gumb ikone
Gumbe z ikonami najdete v orodnih vrsticah in vrsticah aplikacij. Ikone so primerne za preklopne gumbe, ki omogočajo izbiro ali preklic izbire. Na primer, dodajanje ali odstranjevanje katerega koli predmeta z oznake.
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 ( ); } Velikosti
Uporabite rekvizit velikosti za večjo ali manjšo ikono v gumbu.
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 ( ); } Barve
Uporabite barvno podlago, da barvno paleto teme uporabite za komponento.
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 ( ); } Prilagajanje
Spodaj so primeri prilagajanja naše komponente.
Gumb za nalaganje
Gumbi za nalaganje lahko prikažejo stanje nalaganja in onemogočijo interakcije gumba.
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> Preklopite gumb za nalaganje, da vidite prehod med nepovezanimi položaji.
Kompleksni gumb
Gumb ikone, gumb Besedilo, vsebovani gumbi in plavajoči akcijski gumbi so vgrajeni v eno komponento, ki se imenuje ButtonBase.
Za ustvarjanje interakcij po meri lahko uporabite komponento nižje ravni.
lev v primerjavi s tigrom
Usmerjevalne knjižnice tretjih oseb
Krmarjenje po odjemalcu brez natančnega potovanja HTTP do strežnika je edinstven primer uporabe. Komponenta ButtonBase ponuja lastnosti komponente za obravnavanje primera uporabe.
Meje
ButtonBase nastavi komponente kazalec-dogodke: brez; na gumb onemogoči, ki prepreči prikaz onemogočenega kazalca.
Če želite uporabiti 'ni dovoljeno' , imate dve možnosti:
Samo CSS: Slog dogodka kazalca lahko odstranite v onemogočenem stanju element:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , čeprav,
Dodati bi morali pointer-events: none; ko ste morali prikazati opise orodij na onemogočenih elementih.
kakšna je velikost zaslona mojega monitorja
Če upodabljate kar koli drugega kot element gumba, se kazalec ne bo spremenil. Na primer povezava element.
Sprememba DOM. Gumb lahko zavijete:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Podpira lahko kateri koli element, na primer povezavo element.
unstyled
Komponenta bo priložena različici brez stila. Idealen je za izvajanje težkih optimizacij in zmanjšanje velikosti svežnja.
API
Kako uporabljati komponento gumba v ReactJS?
Gumbi omogočajo uporabnikom, da izvedejo svoja dejanja in izbirajo z enim dotikom. Ta komponenta nam je na voljo za vsebino uporabniškega vmesnika React in jo je zelo enostavno integrirati. Komponento gumba v ReactJS lahko uporabimo z naslednjim pristopom.
Ustvarjanje aplikacije React in namestitev modulov:
Korak 1: Zgradite aplikacijo React z uporabo spodnjega ukaza:
npx create-react-app foldername
2. korak: Ko ustvarite mapo projekta in ime mape za krmarjenje po njej z uporabo danega ukaza:
cd foldername
3. korak: Namestite Material-UI modul z naslednjim ukazom po izdelavi aplikacije ReactJS:
npm install @material-ui/core
Struktura projekta: Videti bo takole.
algoritem za binarno iskanje
strukturo projekta
App.js: Zdaj morate napisati spodnjo kodo v App.js mapa.
Tukaj je aplikacija privzeta komponenta, kamor smo zapisali našo kodo.
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; Koraki za zagon aplikacije:
Zaženite aplikacijo z ukazom iz korenskega imenika projekta:
npm start
Izhod: Zdaj odprite brskalnik in pojdite na http://localhost:3000/. Ogledate si lahko spodnji rezultat:
