Els botons permeten als usuaris fer accions i prendre decisions amb un sol toc.

Ells (botons) comuniquen les accions que poden realitzar els usuaris. El col·loca la vostra interfície d'usuari en llocs com els següents:

• Finestres modals
• Formes
• Targetes
• Barres d'eines
• Botó bàsic

El botó es presenta en 3 variants: text (per defecte), contingut, i esbossat.

palíndrom en java

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

Botó de text

Els botons de text s'utilitzen per a accions menys pronunciades, incloses les dels diàlegs de targetes. A les targetes, els botons de text ens ajudaran a mantenir l'èmfasi en el contingut de la targeta.

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

Botó contingut

Els botons continguts tenen molta èmfasi, es distingeixen per l'ús d'elevació i farciment. Conté accions que s'utilitzen principalment a la nostra aplicació.

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

Podeu eliminar l'elevació amb l'element d'elevació desactivat.

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

Botó esquematitzat

Els botons esbossats són botons d'èmfasi mitjà. Contenen accions essencials però no l'acció principal de l'aplicació.

Els botons esbossats són l'alternativa inferior per contenir els botons o una alternativa amb més èmfasi als botons de 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 ); } 

Gestió de clics

Tots els components accepten un onClick controlador que s'aplica a l'arrel DOM element.

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

Nota: la documentació evita esmentar els accessoris natius a la nostra secció API dels components.

Color

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

A més, utilitzant els colors dels botons predeterminats, podeu afegir personalitzats o desactivar els que no necessiteu.

Mida

Utilitzeu aquesta propietat per a botons més grans o més petits.

Botó de càrrega

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

Botons amb etiqueta i icona

De vegades és possible que vulgueu tenir icones per a determinats botons per millorar l'UX de l'aplicació, ja que reconeixem que els logotips són més fàcils que el text sense format.

Per exemple, Si volem suprimir el botó, hauríeu d'etiquetar-lo amb una icona d'escombraries.

 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>

Botó d'icona

Els botons d'icones es troben a les barres d'eines i a les barres d'aplicacions. Les icones són adequades per als botons de commutació que permeten seleccionar o deseleccionar les opcions. M'agrada, afegir o eliminar qualsevol element de l'etiqueta.

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

Mides

Utilitzeu la mida per a la icona més gran o més petita del botó.

llista com a matriu

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

Colors

Utilitzeu l'accessori de color per aplicar la paleta de colors del tema al component.

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

Personalització

A continuació es mostren exemples de personalització del nostre component.

Botó de càrrega

Els botons de càrrega poden mostrar l'estat de càrrega i desactivar les interaccions del botó.

 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>

Commuta el botó de càrrega per veure la transició entre posicions no relacionades.

Botó complex

El botó d'icona, el botó de text, els botons continguts i els botons d'acció flotants estan integrats en un únic component que s'anomena ButtonBase.

Podeu prendre un component de nivell inferior per crear interaccions personalitzades.

Biblioteques d'encaminament de tercers

Navegar pel client sense un viatge HTTP exacte al servidor és un cas d'ús únic. El component ButtonBase proporciona propietats del component per gestionar el cas d'ús.

Fronteres

ButtonBase estableix els esdeveniments punter del component: cap; al botó desactivar, que impedeix l'aparició del cursor desactivat.

serial a postgres

Si voleu utilitzar 'no permès' , tens dues opcions:

Només CSS: Podeu eliminar l'estil d'esdeveniment de punter a l'estat desactivat de element:

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

Encara que,

Hauríeu d'afegir esdeveniments de punter: cap; quan necessiteu mostrar informació sobre eines sobre elements desactivats.

Si representeu qualsevol cosa que no sigui l'element botó, el cursor no canviarà. Per exemple, un enllaç element.

Canvi de DOM. Podeu embolicar el botó:

cadena.conté java

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

Pot suportar qualsevol element, per exemple, un enllaç element.

sense estil

El component vindrà amb la versió sense estil. És ideal per fer optimitzacions pesades i reduir la mida del paquet.

API

Com utilitzar el component del botó a ReactJS?

Els botons permeten als usuaris fer les seves accions i prendre decisions amb un sol toc. Aquest component està disponible per al contingut de React UI i és molt fàcil d'integrar. Podem utilitzar el component del botó a ReactJS mitjançant el següent enfocament.

Creació de l'aplicació react i instal·lació de mòduls:

Pas 1: Creeu una aplicació React utilitzant l'ordre següent:

 npx create-react-app foldername 

Pas 2: Després de crear la carpeta del projecte i el nom de la carpeta per navegar-hi mitjançant l'ordre donada:

modulació d'amplitud

 cd foldername 

Pas 3: Instal·leu el Material-UI mòdul mitjançant l'ordre següent, després de crear l'aplicació ReactJS:

 npm install @material-ui/core 

Estructura del projecte: Es veurà com el següent.

estructura del projecte

App.js: Ara, heu d'escriure el codi següent al fitxer App.js dossier.

Aquí, l'aplicació és el component predeterminat on hem escrit al nostre codi.

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; 

Passos per executar l'aplicació:

Executeu l'aplicació mitjançant l'ordre del directori arrel del projecte:

 npm start 

Sortida: Ara obriu el vostre navegador i aneu a http://localhost:3000/. Podeu veure la sortida següent: