Mygtukai leidžia vartotojams atlikti veiksmus ir pasirinkti vienu palietimu.

Jie (mygtukai) praneša apie veiksmus, kuriuos gali atlikti vartotojai. Jį jūsų vartotojo sąsaja pateikia tokiose vietose, kaip toliau:

• Modaliniai langai
• Formos
• Kortelės
• Įrankių juostos
• Pagrindinis mygtukas

Mygtukas yra 3 variantų: tekstas (numatytasis), yra, ir nurodyta.

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

Teksto mygtukas

Teksto mygtukai naudojami ne tokiems veiksmams, įskaitant kortelių dialogo languose esančius veiksmus. Kortelėse teksto mygtukai padės mums išlaikyti kortelių turinį.

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

Sudėtyje esantis mygtukas

Sudėtyje esantys mygtukai yra labai paryškinti, išsiskiriantys paaukštinimu ir užpildymu. Jame yra veiksmų, kurie pirmiausia naudojami mūsų programoje.

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

Galite pašalinti aukštį išjungę aukščio atramą.

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

Nubrėžtas mygtukas

Kontūriniai mygtukai yra vidutinio paryškinimo mygtukai. Juose yra pagrindiniai veiksmai, bet ne pagrindinis veiksmas programoje.

masyvo objektas java

Kontūriniai mygtukai yra mažesnė mygtukų alternatyva arba didesnio akcento teksto mygtukų alternatyva.

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

Paspaudimų valdymas

Visi komponentai priima an paspaudus tvarkytojas, kuris taikomas šaknims DOM elementas.

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

Pastaba: dokumentacijoje vengiama paminėti savuosius rekvizitus mūsų API komponentų skyriuje.

Spalva

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

Be to, naudodami numatytąsias mygtukų spalvas, galite pridėti pasirinktinių arba išjungti nereikalingas.

Dydis

Naudokite šią savybę didesniems ar mažesniems mygtukams.

Įkėlimo mygtukas

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

Mygtukai su etikete ir piktograma

Kartais galbūt norėsite turėti tam tikrų mygtukų piktogramas, kad pagerintumėte programos UX, nes logotipus pripažįstame lengviau nei paprastą tekstą.

Pavyzdžiui, Jei norime ištrinti mygtuką, pažymėkite jį šiukšliadėžės piktograma.

 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>

Piktogramos mygtukas

Piktogramų mygtukai yra įrankių juostose ir programų juostose. Piktogramos tinka perjungimo mygtukams, kurie leidžia pasirinkti arba panaikinti pasirinkimą. Patinka, pridėti arba pašalinti bet kokį elementą iš etiketės.

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

Dydžiai

Naudokite dydžio rekvizitus didesnei arba mažesnei piktogramai mygtuke.

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

Spalvos

Naudokite spalvų atramą, kad komponentui pritaikytumėte temos spalvų paletę.

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

Tinkinimas

Žemiau pateikiami mūsų komponento tinkinimo pavyzdžiai.

Įkrovimo mygtukas

Įkėlimo mygtukai gali rodyti įkėlimo būseną ir išjungti mygtuko sąveiką.

 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>

Perjunkite įkėlimo mygtuką, kad pamatytumėte perėjimą tarp nesusijusių pozicijų.

Sudėtingas mygtukas

Piktogramos mygtukas, mygtukas Tekstas, esantys mygtukai ir slankiojantys veiksmų mygtukai yra integruoti į vieną komponentą, vadinamą „ButtonBase“.

Norėdami sukurti pasirinktines sąveikas, galite naudoti žemesnio lygio komponentą.

kas yra darbalaukio ini

Trečiųjų šalių maršruto parinkimo bibliotekos

Kliento naršymas be tikslios HTTP kelionės į serverį yra unikalus naudojimo atvejis. Komponentas „ButtonBase“ suteikia komponento ypatybes, kad būtų galima apdoroti naudojimo atvejį.

Sienos

ButtonBase nustato komponento rodyklės įvykius: nėra; ant išjungimo mygtuko, kuris neleidžia atsirasti išjungtam žymekliui.

Jei norite naudoti 'neleidžiama' , turite dvi parinktis:

Tik CSS: Galite pašalinti žymiklio įvykio stilių išjungus būseną elementas:

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

nors,

Turėtumėte pridėti žymeklio įvykius: nėra; kai reikėjo rodyti patarimus išjungtuose elementuose.

Jei atvaizduosite ką nors, išskyrus mygtuko elementą, žymeklis nepasikeis. Pavyzdžiui, nuoroda elementas.

DOM pakeitimas. Galite apvynioti mygtuką:

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

Jis gali palaikyti bet kurį elementą, pavyzdžiui, nuorodą elementas.

nestilingas

Komponentas bus tiekiamas su nestilių versija. Tai idealiai tinka atliekant didelius optimizavimus ir mažinant paketo dydį.

API

Kaip naudoti mygtuko komponentą ReactJS?

Mygtukai leidžia vartotojams atlikti savo veiksmus ir pasirinkti vienu palietimu. Šis komponentas yra prieinamas „React UI“ turiniui ir jį labai lengva integruoti. ReactJS mygtuko komponentą galime naudoti naudodami šį metodą.

React programėlės kūrimas ir modulių diegimas:

1 žingsnis: Sukurkite „React“ programą naudodami toliau pateiktą komandą:

 npx create-react-app foldername 

2 žingsnis: Sukūrę projekto aplanką ir aplanko pavadinimą, norėdami jį naršyti naudodami nurodytą komandą:

 cd foldername 

3 veiksmas: Įdiekite Medžiaga-UI modulį naudodami šią komandą, sukūrę ReactJS programą:

 npm install @material-ui/core 

Projekto struktūra: Tai atrodys taip.

projekto struktūra

sąlyginis operatorius java

App.js: Dabar turite parašyti žemiau esantį kodą App.js failą.

Čia programa yra numatytasis komponentas, kurį įrašėme savo 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; 

Programos paleidimo veiksmai:

Paleiskite programą naudodami komandą iš projekto šakninio katalogo:

 npm start 

Išvestis: Dabar atidarykite naršyklę ir eikite į http://localhost:3000/. Galite pamatyti žemiau pateiktą išvestį: