Painikkeiden avulla käyttäjät voivat tehdä toimintoja ja tehdä valintoja yhdellä napautuksella.

Ne (painikkeet) viestivät toiminnoista, joita käyttäjät voivat suorittaa. Käyttöliittymäsi sijoittaa sen seuraaviin paikkoihin:

• Modaaliset ikkunat
• Lomakkeet
• Kortit
• Työkalurivit
• Peruspainike

Painikkeesta on kolme versiota: teksti (oletus), sisältää, ja hahmoteltu.

junit-testitapaukset

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

Teksti-painike

Tekstipainikkeita käytetään vähemmän selkeisiin toimiin, mukaan lukien korttivalintaikkunat. Korteissa tekstipainikkeet auttavat meitä säilyttämään kortin sisällön painotuksen.

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

Sisältää-painike

Sisältyvät painikkeet ovat korostettuja, ja ne erottuvat korkeuden ja täytön käytöstä. Se sisältää toimintoja, joita käytetään ensisijaisesti sovelluksessamme.

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

Voit poistaa korkeuden poistamalla korkeuspotkun käytöstä.

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

Piirretty painike

Piirretyt painikkeet ovat keskikorostuspainikkeita. Ne sisältävät olennaisia ​​toimintoja, mutta eivät sovelluksen päätoimintoa.

Piirretyt painikkeet ovat alempi vaihtoehto painikkeiden sisältämiselle tai korkeampi painotusvaihtoehto tekstipainikkeille.

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

Napsautusten käsittely

Kaikki komponentit hyväksyvät an klikkaamalla käsittelijä, jota sovelletaan juureen DOM elementti.

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

Huomautus: Dokumentaatiossa ei mainita alkuperäisiä rekvisiitta osien API-osiossa.

Väri

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

Lisäksi käyttämällä painikkeiden oletusvärejä voit lisätä mukautettuja tai poistaa käytöstä tarpeettomia.

Koko

Käytä tätä ominaisuutta suurempiin tai pienempiin painikkeisiin.

Lataa-painike

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

Painikkeet etiketillä ja kuvakkeella

Joskus saatat haluta käyttää kuvakkeita tietyille painikkeille parantaaksesi sovelluksen käyttökokemusta, koska tunnistamme logot helpommin kuin pelkkä teksti.

Esimerkiksi, Jos haluamme poistaa painikkeen, sinun tulee merkitä se roskakorikuvakkeella.

 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>

Ikoni-painike

Kuvakepainikkeet löytyvät työkalupalkeista ja sovelluspalkeista. Kuvakkeet sopivat vaihtopainikkeille, jotka mahdollistavat valintojen valitsemisen tai valinnan poistamisen. Tykkää mistä tahansa kohteesta, lisäät tai poistat tarrasta.

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

Koot

Käytä kokoa suurempaa tai pienempää kuvaketta varten painikkeessa.

git-tila

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

värit

Käytä väripotkua lisätäksesi teeman väripaletin komponenttiin.

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

Räätälöinti

Alla on esimerkkejä komponenttimme mukauttamisesta.

Latauspainike

Latauspainikkeet voivat näyttää lataustilan ja estää painikkeen vuorovaikutuksen.

 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>

Vaihda latauspainiketta nähdäksesi siirtymisen toisiinsa liittymättömien paikkojen välillä.

Monimutkainen painike

Kuvakepainike, Tekstipainike, sisältämät painikkeet ja kelluvat toimintopainikkeet on rakennettu yhdeksi komponentiksi, jota kutsutaan nimellä ButtonBase.

Voit luoda mukautettuja vuorovaikutuksia käyttämällä alemman tason komponentteja.

Kolmannen osapuolen reitityskirjastot

Asiakkaan navigointi ilman tarkkaa HTTP-matkaa palvelimelle on ainutlaatuinen käyttötapaus. ButtonBase-komponentti tarjoaa komponenttiominaisuuksia käyttötapauksen käsittelemiseksi.

Rajat

ButtonBase asettaa komponentin pointer-tapahtumat: ei mitään; poistopainikkeella, joka estää käytöstä poistetun kohdistimen ilmestymisen.

.04 murto-osana

Jos haluat käyttää 'ei sallittu' , sinulla on kaksi vaihtoehtoa:

Vain CSS: Voit poistaa osoitintapahtumatyylin käytöstä poistetusta tilasta elementti:

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

Siitä huolimatta,

Sinun tulisi lisätä osoitintapahtumat: none; kun piti näyttää työkaluvihjeitä käytöstä poistetuissa elementeissä.

Jos hahmonnat jotain muuta kuin painikeelementin, kohdistin ei muutu. Esimerkiksi linkki elementti.

DOM-muutos. Voit kääriä painikkeen:

mikä on build-essential ubuntu

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

Se voi tukea mitä tahansa elementtiä, esimerkiksi linkkiä elementti.

tyylitön

Komponentti toimitetaan tyylittömän version mukana. Se sopii erinomaisesti raskaaseen optimointiin ja nippukoon pienentämiseen.

API

Kuinka käyttää painikekomponenttia ReactJS:ssä?

Painikkeiden avulla käyttäjät voivat tehdä toimintonsa ja tehdä valintoja yhdellä napautuksella. Tämä komponentti on saatavillamme React UI -sisällölle, ja se on erittäin helppo integroida. Voimme käyttää painikekomponenttia ReactJS:ssä käyttämällä seuraavaa lähestymistapaa.

React-sovelluksen luominen ja moduulien asentaminen:

Vaihe 1: Rakenna React-sovellus käyttämällä alla olevaa komentoa:

 npx create-react-app foldername 

Vaihe 2: Kun olet luonut projektikansion ja kansion nimen navigoidaksesi siinä käyttämällä annettua komentoa:

kolminkertainen talvi

 cd foldername 

Vaihe 3: Asenna Materiaali-käyttöliittymä moduuli seuraavalla komennolla ReactJS-sovelluksen luomisen jälkeen:

 npm install @material-ui/core 

Hankkeen rakenne: Se näyttää seuraavalta.

projektin rakenne

App.js: Nyt sinun on kirjoitettava alla oleva koodi App.js tiedosto.

Tässä sovellus on oletuskomponentti, johon olemme kirjoittaneet koodissamme.

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; 

Sovelluksen suorittamisen vaiheet:

Suorita sovellus komennolla projektin juurihakemistosta:

 npm start 

Lähtö: Avaa nyt selain ja siirry kohtaan http://localhost:3000/. Voit nähdä alla olevan lähdön: