Knappar låter användare vidta åtgärder och göra val med ett enda tryck.
De (knappar) kommunicerar de åtgärder som användare kan utföra. Den placeras av ditt användargränssnitt på platser som nedan:
- Modala fönster
- Blanketter
- Kort
- Verktygsfält
- Grundläggande knapp
Knappen finns i 3 varianter: text (standard), innehöll, och skisserat.
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 ); } Textknapp
Textknappar används för mindre uttalade åtgärder, inklusive de i kortdialoger. I kort hjälper textknapparna oss att behålla en betoning på kortinnehåll.
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 ); } Innehållen knapp
Innehållna knappar är högviktiga, kännetecknas av användningen av höjd och fyllning. Den innehåller åtgärder som primärt används i vår 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 ); } Du kan ta bort höjden med inaktivera Elevation prop.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Konturerad knapp
Konturerade knappar är knappar med medelstor betoning. De innehåller viktiga åtgärder men inte huvudåtgärden i appen.
Konturerade knappar är det lägre alternativet för att innehålla knapparna eller ett alternativ med högre tonvikt till textknapparna.
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 ); } Hantera klick
Alla komponenter accepterar en påKlicka hanterare som appliceras på roten DOM element.
var hittar jag mina webbläsarinställningar
{ alert('clicked'); }} > Click me Obs: Dokumentationen undviker att nämna de inbyggda rekvisita i vår API-sektion av komponenterna.
Färg
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 ); } Dessutom, genom att använda standardknappfärgerna, kan du lägga till anpassade eller inaktivera alla du inte behöver.
Storlek
Använd den här egenskapen för större eller mindre knappar.
Ladda upp-knapp
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 ); } Knappar med etikett och ikon
Ibland kanske du vill ha ikoner för vissa knappar för att förbättra applikationens användarupplevelse, eftersom vi erkänner logotyper lättare än vanlig text.
Till exempel, Om vi vill ta bort knappen bör du märka den med en soptunnelikon.
import * as React from 'react'; import Button from '@mui/material/Button'; import DeleteIcon from '@mui/icons-material/Delete'; import SendIcon from '@mui/icons-material/Send'; import Stack from '@mui/material/Stack'; export default function IconLabelButtons() { return ( <button variant="outlined" starticon="{}"> Delete </button><button variant="contained" endicon="{}"> Send ); } </button> Ikonknapp
Ikonknappar finns i verktygsfält och appfält. Ikoner är lämpliga för växlingsknappar som gör att alternativen kan väljas eller avmarkeras. Gilla, lägga till eller ta bort något objekt från etiketten.
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 ( ); } Storlekar
Använd storleksstödet för större eller mindre ikon i knappen.
kassan i git
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 ( ); } Färger
Använd färgstöd för att applicera temafärgpaletten på komponenten.
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 ( ); } Anpassning
Nedan finns exempel på anpassning av vår komponent.
Laddar knapp
Laddningsknapparna kan visa laddningstillståndet och inaktivera knappens interaktioner.
import * as React from 'react'; import LoadingButton from '@mui/lab/LoadingButton'; import SaveIcon from '@mui/icons-material/Save'; import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( Submit Fetch data <loadingbutton loading loadingposition="start" starticon="{}" variant="outlined"> Save ); } </loadingbutton> Växla laddningsknappen för att se övergången mellan orelaterade positioner.
Komplex knapp
Ikonknapp, textknapp, inneslutna knappar och flytande åtgärdsknappar är inbyggda i en enda komponent som kallas ButtonBase.
Du kan ta en komponent på lägre nivå för att skapa anpassade interaktioner.
Tredje parts Routing-bibliotek
Att navigera klienten utan en exakt HTTP-resa till servern är ett unikt användningsfall. ButtonBase-komponenten tillhandahåller komponentegenskaper för att hantera användningsfallet.
Gränser
ButtonBase ställer in komponentpekarhändelserna: ingen; på inaktiveringsknappen, vilket förhindrar uppkomsten av den inaktiverade markören.
Om du vill använda 'inte tillåtet' , du har två alternativ:
Endast CSS: Du kan ta bort stilen för pekarehändelse i det inaktiverade tillståndet element:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , Fastän,
Du bör lägga till pekarhändelser: ingen; när du behövde visa verktygstips på inaktiverade element.
Om du renderar något annat än knappelementet ändras inte markören. Till exempel en länk element.
DOM-ändring. Du kan slå in knappen:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Den kan stödja vilket element som helst, till exempel en länk element.
opylerad
Komponenten kommer med den ostilade versionen. Den är idealisk för att göra tunga optimeringar och minska paketstorleken.
API
Hur använder man knappkomponenten i ReactJS?
Knappar låter användare vidta sina åtgärder och göra val med ett enda tryck. Den här komponenten är tillgänglig för oss för React UI-innehåll, och den är mycket enkel att integrera. Vi kan använda knappkomponenten i ReactJS genom att använda följande tillvägagångssätt.
stjärntopologi
Skapa React-app och installera moduler:
Steg 1: Bygg en React-applikation genom att använda kommandot nedan:
npx create-react-app foldername
Steg 2: Efter att ha skapat projektmappen och namnet på mappen för att navigera i den med hjälp av det givna kommandot:
cd foldername
Steg 3: Installera Material-UI modul med följande kommando, efter att ha skapat ReactJS-applikationen:
npm install @material-ui/core
Projektets struktur: Det kommer att se ut som följande.
projektstruktur
App.js: Nu måste du skriva koden nedan i App.js fil.
Här är appen standardkomponenten där vi har skrivit in vår kod.
JavaScript
import React from 'react'; import Button from '@material-ui/core/Button'; const App = () => { return ( <h3>How to use Button Component in ReactJS?</h3> <br> Default Button Primary Button Secondary Button Disabled Button Link Button ); } export default App; Steg för att köra programmet:
Kör programmet genom att använda kommandot från projektets rotkatalog:
npm start
Produktion: Öppna nu din webbläsare och gå till http://localhost:3000/. Du kan se utdata nedan:
