Gumbi omogućuju korisnicima poduzimanje radnji i donošenje odluka jednim dodirom.
Oni (gumbi) komuniciraju radnje koje korisnici mogu izvesti. Postavlja ga vaše korisničko sučelje na mjesta kao što je dolje:
- Modalni prozori
- Obrasci
- Kartice
- Alatne trake
- Osnovni gumb
Gumb dolazi u 3 varijante: tekst (zadano), sadržano, i ocrtano.
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 ); } Gumb za tekst
Tekstualni gumbi koriste se za manje izražene radnje, uključujući one u dijalozima kartica. Na karticama će nam tekstualni gumbi pomoći da zadržimo naglasak na sadržaju kartice.
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 ); } Sadržano dugme
Sadržani gumbi su visoko naglašeni, razlikuju se upotrebom elevacije i ispune. Sadrži radnje koje se primarno koriste u našoj aplikaciji.
mvc u proljetnom okviru
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 ); } Uzvišenje možete ukloniti onemogućivanjem Elevation prop.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Ocrtani gumb
Ocrtani gumbi su srednje naglašeni gumbi. Sadrže bitne radnje, ali ne i glavnu radnju u aplikaciji.
Ocrtani gumbi niža su alternativa za sadržavanje gumba ili alternativa za veći naglasak tekstualnim gumbima.
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 ); } Rukovanje klikovima
Sve komponente prihvaćaju an na klik rukovatelj koji se primjenjuje na korijen DOM element.
{ alert('clicked'); }} > Click me Napomena: u dokumentaciji se izbjegava spominjanje izvornih rekvizita u našem API dijelu komponenti.
Boja
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 ); } Osim toga, korištenjem zadanih boja gumba možete dodati prilagođene ili onemogućiti one koji vam ne trebaju.
Veličina
Koristite ovo svojstvo za veće ili manje gumbe.
Gumb za prijenos
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 ); } Gumbi s oznakom i ikonom
Ponekad ćete možda htjeti imati ikone za određene gumbe kako biste poboljšali korisnički doživljaj aplikacije, budući da prepoznajemo logotipe lakše nego običan tekst.
numpy linspace
Na primjer, Ako želimo izbrisati gumb, trebali biste ga označiti ikonom kante za smeće.
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> Gumb ikone
Gumbi ikona nalaze se na alatnim trakama i trakama aplikacija. Ikone su prikladne za gumbe za prebacivanje koji omogućuju odabir ili poništavanje odabira. Kao, dodavanje ili uklanjanje bilo koje stavke s oznake.
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 ( ); } Veličine
Upotrijebite okvir veličine za veću ili manju ikonu u gumbu.
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 ( ); } Boje
Upotrijebite prop za boju da biste primijenili paletu boja teme na komponentu.
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 ( ); } Prilagodba
Ispod su primjeri prilagođavanja naše komponente.
Gumb za učitavanje
Gumbi za učitavanje mogu prikazati stanje učitavanja i onemogućiti interakcije gumba.
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> Prebacite gumb za učitavanje da vidite prijelaz između nepovezanih položaja.
Složeno dugme
Gumb ikona, gumb Tekst, sadržani gumbi i plutajući akcijski gumbi ugrađeni su u jednu komponentu koja se naziva ButtonBase.
linearno pretraživanje u Javi
Možete uzeti komponentu niže razine za stvaranje prilagođenih interakcija.
Knjižnice za usmjeravanje trećih strana
Kretanje klijentom bez točnog HTTP putovanja do poslužitelja jedinstven je slučaj upotrebe. Komponenta ButtonBase pruža svojstva komponente za rukovanje slučajem upotrebe.
Granice
ButtonBase postavlja komponentu pointer-events: none; na gumb za onemogućavanje, koji sprječava pojavu onemogućenog kursora.
Ako želite koristiti 'nije dozvoljeno' , imate dvije mogućnosti:
Samo CSS: Možete ukloniti stil događaja pokazivača u onemogućenom stanju element:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , Iako,
python chr funkcija
Trebali biste dodati događaje pokazivača: nijedan; kada ste trebali prikazati opise alata na onemogućenim elementima.
Ako renderirate bilo što osim elementa gumba, kursor se neće promijeniti. Na primjer, poveznicu element.
Promjena DOM-a. Gumb možete omotati:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Može podržavati bilo koji element, na primjer, vezu element.
nestiliziran
Komponenta dolazi s nestiliziranom verzijom. Idealan je za izvođenje velikih optimizacija i smanjenje veličine paketa.
API
Kako koristiti komponentu gumba u ReactJS?
Gumbi omogućuju korisnicima da poduzmu svoje radnje i donesu izbor jednim dodirom. Ova komponenta nam je dostupna za React UI sadržaj, a vrlo ju je jednostavno integrirati. Možemo koristiti komponentu gumba u ReactJS koristeći sljedeći pristup.
Izrada react aplikacije i instaliranje modula:
Korak 1: Izradite React aplikaciju pomoću donje naredbe:
java kako nadjačati
npx create-react-app foldername
Korak 2: Nakon stvaranja mape projekta i naziva mape za navigaciju pomoću zadane naredbe:
cd foldername
Korak 3: Instalirajte Materijal-UI modul koristeći sljedeću naredbu, nakon izrade ReactJS aplikacije:
npm install @material-ui/core
Struktura projekta: Izgledat će ovako.
struktura projekta
App.js: Sada morate napisati donji kod u App.js datoteka.
Ovdje je aplikacija zadana komponenta koju smo napisali u našem kodu.
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; Koraci za pokretanje aplikacije:
Pokrenite aplikaciju pomoću naredbe iz korijenskog direktorija projekta:
npm start
Izlaz: Sada otvorite svoj preglednik i idite na http://localhost:3000/. Možete vidjeti donji izlaz:
