A gombok lehetővé teszik a felhasználók számára, hogy egyetlen érintéssel intézkedjenek és döntéseket hozzanak.

Ezek (gombok) kommunikálják a felhasználók által végrehajtható műveleteket. Az Ön felhasználói felülete az alábbi helyekre helyezi el:

• Modális ablakok
• Űrlapok
• Kártyák
• Eszköztárak
• Alap gomb

A gomb 3 változatban kapható: szöveg (alapértelmezett), tartalmazza, és körvonalazva.

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

Szöveg gomb

A szöveggombok a kevésbé kifejezett műveletekhez használatosak, beleértve a kártyapárbeszédpanelek műveleteit is. A kártyákon a szöveges gombok segítenek abban, hogy a kártya tartalmára helyezzük a hangsúlyt.

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

Tartalmazott gomb

A benne lévő gombok nagy hangsúlyt kapnak, és kiemelik a kiemelés és a kitöltést. Olyan műveleteket tartalmaz, amelyek elsődlegesen az alkalmazásunkban használatosak.

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

A magasságot az Elevation prop letiltásával távolíthatja el.

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

Vázolt gomb

A körvonalas gombok közepes hangsúlyú gombok. Ezek alapvető műveleteket tartalmaznak, de nem az alkalmazás fő műveletét.

fizzbuzz java

A körvonalazott gombok a gombok elhelyezésének alacsonyabb alternatívája, vagy a szöveges gombok nagyobb hangsúlyos alternatívája.

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

Kattintások kezelése

Minden komponens elfogad egy kattintásra kezelő, amely a gyökérre vonatkozik DOM elem.

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

Megjegyzés: A dokumentációban kerülni kell a natív kellékek említését az összetevők API-részében.

Szín

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

Ezenkívül az alapértelmezett gombszínek használatával egyénileg hozzáadhat vagy letilthat minden felesleges színt.

Méret

Használja ezt a tulajdonságot nagyobb vagy kisebb gombokhoz.

Feltöltés gomb

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

Gombok címkével és ikonnal

Néha érdemes lehet ikonokat használni bizonyos gombokhoz az alkalmazás felhasználói élményének javítása érdekében, mivel a logókat könnyebben ismerjük el, mint az egyszerű szöveget.

Például, Ha törölni akarjuk a gombot, akkor jelölje meg egy szemetes ikonnal.

 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>

Ikon gomb

Az ikongombok az eszköztárban és az alkalmazássávokban találhatók. Az ikonok megfelelőek a váltógombokhoz, amelyek lehetővé teszik a választási lehetőségek kiválasztását vagy megszüntetését. Bármely elem kedvelése, hozzáadása vagy eltávolítása a címkéről.

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

Méretek

Használja a mérettámaszt a nagyobb vagy kisebb ikonhoz a gombban.

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

Színek

Használja a színprofilt a téma színpalettájának az összetevőre való alkalmazásához.

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

Testreszabás

Az alábbiakban példákat láthatunk összetevőink testreszabására.

Betöltés gomb

A betöltési gombok megjeleníthetik a betöltés állapotát és letilthatják a gomb interakcióit.

 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>

A betöltés gomb megnyomásával megtekintheti a nem kapcsolódó pozíciók közötti átmenetet.

Komplex gomb

Az ikongomb, a szöveg gomb, a benne lévő gombok és a lebegő műveletgombok egyetlen komponensbe vannak beépítve, amelyet ButtonBase-nek neveznek.

Egyéni interakciók létrehozásához alacsonyabb szintű összetevőt is használhat.

Harmadik féltől származó útválasztási könyvtárak

Egyedülálló felhasználási eset a kliens navigálása a szerverhez való pontos HTTP-utazás nélkül. A ButtonBase összetevő összetevőtulajdonságokat biztosít a használati eset kezeléséhez.

Határok

A ButtonBase beállítja a mutató-események összetevőit: nincs; a letiltási gombon, amely megakadályozza a letiltott kurzor megjelenését.

Ha használni szeretné 'nem megengedett' , két lehetősége van:

Csak CSS: Eltávolíthatja a mutató-esemény stílusát a letiltott állapotában elem:

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

Habár,

Hozzá kell adnia a pointer-eseményeket: nincs; amikor eszközleírásokat kellett megjelenítenie a letiltott elemeken.

Ha a gombelemen kívül mást is renderel, akkor a kurzor nem változik. Például egy link elem.

DOM változás. Becsomagolhatod a gombot:

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

Bármilyen elemet támogathat, például egy hivatkozást elem.

stílustalan

A komponens a stílustalan verzióval érkezik. Ideális nehéz optimalizálás elvégzésére és a köteg méretének csökkentésére.

API

Hogyan kell használni a gombkomponenst a ReactJS-ben?

A gombok lehetővé teszik a felhasználók számára, hogy egyetlen koppintással végrehajtsák műveleteiket és döntéseiket. Ez az összetevő elérhető számunkra a React UI tartalmakhoz, és nagyon könnyen integrálható. A ReactJS gombkomponensét a következő megközelítéssel használhatjuk.

React alkalmazás létrehozása és modulok telepítése:

1. lépés: Hozzon létre egy React alkalmazást az alábbi paranccsal:

 npx create-react-app foldername 

2. lépés: A projektmappa létrehozása után és a mappa neve, amelyen a megadott paranccsal navigálhat:

 cd foldername 

3. lépés: Telepítse a Anyag-UI modult a következő paranccsal, a ReactJS alkalmazás létrehozása után:

 npm install @material-ui/core 

Projekt felépítése: A következőképpen fog kinézni.

projekt felépítése

App.js: Most be kell írnia az alábbi kódot a App.js fájlt.

Itt az alkalmazás az alapértelmezett komponens, amelyet a kódunkba írtunk.

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; 

Az alkalmazás futtatásának lépései:

Futtassa az alkalmazást a projekt gyökérkönyvtárában található paranccsal:

 npm start 

Kimenet: Most nyissa meg a böngészőt, és lépjen a következőre http://localhost:3000/. Az alábbi kimenetet láthatja: