I pulsanti consentono agli utenti di eseguire azioni e fare scelte con un solo tocco.

Loro (pulsanti) comunicano le azioni che gli utenti possono eseguire. Viene posizionato dall'interfaccia utente in luoghi come di seguito:

• Finestre modali
• Forme
• Carte
• Barre degli strumenti
• Pulsante di base

Il pulsante è disponibile in 3 varianti: testo (predefinito), contenuto, E delineato.

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

Pulsante testo

I pulsanti di testo vengono utilizzati per azioni meno pronunciate, comprese quelle nelle finestre di dialogo delle schede. Nelle carte, i pulsanti di testo ci aiuteranno a mantenere l'accento sul contenuto delle carte.

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

Pulsante contenuto

I pulsanti contenuti sono di grande enfasi, distinti dall'uso di elevazione e riempimento. Contiene azioni utilizzate principalmente nella nostra app.

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

Puoi rimuovere l'elevazione con la disabilitazione dell'elevazione.

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

Pulsante delineato

I pulsanti delineati sono pulsanti con enfasi media. Contengono azioni essenziali ma non l'azione principale nell'app.

I pulsanti delineati rappresentano l'alternativa inferiore per contenere i pulsanti o un'alternativa di maggiore enfasi ai pulsanti di testo.

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

Gestione dei clic

Tutti i componenti accettano un al clic gestore che viene applicato alla radice DOM elemento.

rendere eseguibile lo script di shell

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

Nota: la documentazione evita di menzionare le proprietà native nella nostra sezione API dei componenti.

Colore

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

Inoltre, utilizzando i colori dei pulsanti predefiniti, puoi aggiungere colori personalizzati o disabilitare quelli che non ti servono.

Misurare

Utilizza questa proprietà per pulsanti più grandi o più piccoli.

Pulsante Carica

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

Pulsanti con etichetta e icona

A volte potresti voler avere icone per determinati pulsanti per migliorare la UX dell'applicazione, poiché riconosciamo i loghi più facilmente del semplice testo.

Per esempio, Se desideriamo eliminare il pulsante, dovremmo etichettarlo con l'icona di un cestino della spazzatura.

 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>

Pulsante icona

I pulsanti icona si trovano nelle barre degli strumenti e nelle barre delle app. Le icone sono appropriate per i pulsanti di attivazione/disattivazione che consentono di selezionare o deselezionare le scelte. Ad esempio, aggiungere o rimuovere qualsiasi elemento dall'etichetta.

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

Dimensioni

Utilizza la dimensione prop per l'icona più grande o più piccola nel pulsante.

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

Colori

Utilizza la prop colore per applicare la tavolozza dei colori del tema al componente.

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

Personalizzazione

Di seguito sono riportati gli esempi di personalizzazione del nostro componente.

Pulsante di caricamento

I pulsanti di caricamento possono mostrare lo stato di caricamento e disabilitare le interazioni del pulsante.

 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>

Attiva/disattiva il pulsante di caricamento per vedere la transizione tra posizioni non correlate.

Pulsante complesso

Il pulsante icona, il pulsante testo, i pulsanti contenuti e i pulsanti di azione mobili sono integrati in un singolo componente chiamato ButtonBase.

Puoi utilizzare componenti di livello inferiore per creare interazioni personalizzate.

panda loc

Librerie di routing di terze parti

La navigazione nel client senza un esatto viaggio HTTP al server è un caso d'uso unico. Il componente ButtonBase fornisce le proprietà del componente per gestire il caso d'uso.

frontiere

ButtonBase imposta il componente eventi-puntatore: none; sul pulsante disabilita, che impedisce la comparsa del cursore disabilitato.

Se vuoi usare 'non autorizzato' , hai due opzioni:

Solo CSS: È possibile rimuovere lo stile dell'evento puntatore nello stato disabilitato di elemento:

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

Sebbene,

Dovresti aggiungere eventi puntatore: none; quando era necessario visualizzare i tooltip sugli elementi disabilitati.

Se esegui il rendering di qualcosa di diverso dall'elemento pulsante, il cursore non cambierà. Ad esempio, un collegamento elemento.

Cambio DOM. Puoi avvolgere il pulsante:

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

Può supportare qualsiasi elemento, ad esempio un collegamento elemento.

forma completa pvr

senza stile

Il componente verrà fornito con la versione senza stile. È ideale per eseguire ottimizzazioni pesanti e ridurre le dimensioni del bundle.

API

Come utilizzare il componente pulsante in ReactJS?

I pulsanti consentono agli utenti di eseguire le proprie azioni e fare scelte con un solo tocco. Questo componente è a nostra disposizione per il contenuto dell'interfaccia utente di React ed è molto facile da integrare. Possiamo utilizzare il componente pulsante in ReactJS utilizzando il seguente approccio.

Creazione dell'app React e installazione dei moduli:

qualcosa per i fidanzati

Passo 1: Crea un'applicazione React utilizzando il comando indicato di seguito:

 npx create-react-app foldername 

Passo 2: Dopo aver creato la cartella del progetto e il nome della cartella per spostarla utilizzando il comando indicato:

 cd foldername 

Passaggio 3: Installa il Materiale-UI modulo utilizzando il seguente comando, dopo aver creato l'applicazione ReactJS:

 npm install @material-ui/core 

Struttura del progetto: Apparirà come il seguente.

struttura del progetto

App.js: Ora devi scrivere il codice seguente nel file App.js file.

Qui, l'App è il componente predefinito in cui abbiamo scritto nel nostro codice.

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; 

Passaggi per eseguire l'applicazione:

Esegui l'applicazione utilizzando il comando dalla directory root del progetto:

 npm start 

Produzione: Ora apri il browser e vai su http://localhost:3000/. Puoi vedere l'output seguente: