Butoanele permite utilizatorilor să întreprindă acțiuni și să facă alegeri cu o singură atingere.

Ele (butoanele) comunică acțiunile pe care utilizatorii le pot efectua. Este plasat de UI în locuri precum mai jos:

• Ferestre modale
• Forme
• Carduri
• Bare de instrumente
• Buton de bază

Butonul vine în 3 variante: text (implicit), conținut, și conturate.

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

butonul Text

Butoanele de text sunt folosite pentru acțiuni mai puțin pronunțate, inclusiv cele din casetele de dialog cu carduri. În carduri, butoanele de text ne vor ajuta să menținem un accent pe conținutul cardului.

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

Buton Conținut

Butoanele conținute sunt foarte accentuate, se disting prin utilizarea cotei și umplerii. Conține acțiuni care sunt utilizate în principal în aplicația noastră.

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

Puteți elimina elevația cu dezactivarea prop Elevation.

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

Buton conturat

Butoanele conturate sunt butoane cu accent mediu. Acestea conțin acțiuni esențiale, dar nu acțiunea principală din aplicație.

sql server pivot

Butoanele conturate sunt alternativa inferioară pentru a conține butoanele sau o alternativă cu accent mai mare la butoanele text.

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

Gestionarea clicurilor

Toate componentele acceptă un onClick handler care este aplicat la rădăcină DOM element.

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

Notă: documentația evită menționarea elementelor de recuzită native în secțiunea noastră API a componentelor.

Culoare

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

În plus, utilizând culorile implicite ale butoanelor, puteți adăuga personalizate sau dezactiva orice nu aveți nevoie.

mărimea

Utilizați această proprietate pentru butoanele mai mari sau mai mici.

Butonul de încărcare

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

Butoane cu etichetă și pictogramă

Uneori poate doriți să aveți pictograme pentru anumite butoane pentru a îmbunătăți UX-ul aplicației, deoarece recunoaștem logo-urile mai ușor decât textul simplu.

De exemplu, Dacă vrem să ștergem butonul, ar trebui să-l etichetați cu o pictogramă de gunoi.

 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>

Butonul pictogramei

Butoanele cu pictograme se găsesc în barele de instrumente și în barele de aplicații. Pictogramele sunt adecvate pentru butoanele de comutare care permit selectarea sau deselectarea opțiunilor. Îmi place, adăugarea sau eliminarea oricărui articol de pe etichetă.

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

Dimensiuni

Folosiți elementul de sprijin pentru dimensiune pentru pictograma mai mare sau mai mică din buton.

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

Culori

Utilizați elementele de reclamă pentru a aplica paleta de culori a temei componentului.

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

Personalizare

Mai jos sunt exemple de personalizare a componentei noastre.

Butonul de încărcare

Butoanele de încărcare pot afișa starea de încărcare și pot dezactiva interacțiunile butonului.

 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>

Comutați butonul de încărcare pentru a vedea tranziția între pozițiile care nu au legătură.

Buton complex

Butonul pictogramă, butonul Text, butoanele conținute și butoanele de acțiune plutitoare sunt încorporate într-o singură componentă care este numită ButtonBase.

Puteți lua componenta de nivel inferior pentru a crea interacțiuni personalizate.

Biblioteci de rutare terță parte

Navigarea clientului fără o călătorie HTTP exactă la server este un caz de utilizare unic. Componenta ButtonBase oferă proprietăți ale componentelor pentru a gestiona cazul de utilizare.

Frontiere

ButtonBase setează componenta pointer-evenimente: none; pe butonul de dezactivare, care împiedică apariția cursorului dezactivat.

Dacă doriți să utilizați 'nepermis' , aveți două opțiuni:

Numai CSS: Puteți elimina stilul pointer-eveniment în starea dezactivată a element:

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

Cu toate că,

Ar trebui să adăugați evenimente pointer: none; atunci când trebuia să afișați sfaturi despre elementele dezactivate.

Dacă redați altceva decât elementul buton, atunci cursorul nu se va schimba. De exemplu, un link element.

Schimbarea DOM. Puteți înfășura butonul:

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

Poate suporta orice element, de exemplu, un link element.

fără stil

Componenta va veni cu versiunea fără stil. Este ideal pentru a face optimizări grele și pentru a reduce dimensiunea pachetului.

API

Cum se utilizează componenta butonului în ReactJS?

Butoanele permit utilizatorilor să-și facă acțiunile și să facă alegeri cu o singură atingere. Această componentă ne este disponibilă pentru conținutul React UI și este foarte ușor de integrat. Putem folosi componenta buton în ReactJS utilizând următoarea abordare.

Crearea aplicației react și instalarea modulelor:

Pasul 1: Construiți o aplicație React utilizând comanda de mai jos:

 npx create-react-app foldername 

Pasul 2: După crearea folderului de proiect și numele folderului pentru a-l naviga folosind comanda dată:

 cd foldername 

Pasul 3: Instalați Material-UI modul folosind următoarea comandă, după crearea aplicației ReactJS:

 npm install @material-ui/core 

Structura proiectului: Va arăta după cum urmează.

structura proiectului

App.js: Acum, trebuie să scrieți codul de mai jos în App.js fişier.

Aici, aplicația este componenta implicită în care am scris în codul nostru.

JavaScript

șir comparabil

 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; 

Pași pentru a rula aplicația:

Rulați aplicația utilizând comanda din directorul rădăcină al proiectului:

 npm start 

Ieșire: Acum deschideți browserul și accesați http://localhost:3000/. Puteți vedea rezultatul de mai jos: