Tlačidlá umožňujú používateľom vykonávať akcie a voľby jediným klepnutím.

Tieto (tlačidlá) oznamujú akcie, ktoré môžu používatelia vykonávať. Umiestňuje ho vaše používateľské rozhranie na miesta, ako je uvedené nižšie:

• Modálne okná
• Formuláre
• karty
• Panely s nástrojmi
• Základné tlačidlo

Tlačidlo sa dodáva v 3 variantoch: text (predvolený), obsiahnutý, a načrtnuté.

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

Textové tlačidlo

Textové tlačidlá sa používajú na menej výrazné akcie, vrátane akcií v dialógoch kariet. V kartách nám textové tlačidlá pomôžu udržať dôraz na obsah karty.

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

Obsiahnuté tlačidlo

Obsiahnuté tlačidlá sú vysoko zdôraznené, vyznačujú sa použitím vyvýšenia a výplne. Obsahuje akcie, ktoré sa primárne používajú v našej aplikácii.

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

Nadmorskú výšku môžete odstrániť pomocou deaktivácie prevýšenia.

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

Obrysové tlačidlo

Tlačidlá s obrysom sú tlačidlá so stredným dôrazom. Obsahujú základné akcie, ale nie hlavnú akciu v aplikácii.

Obrysové tlačidlá sú nižšou alternatívou, ktorá obsahuje tlačidlá, alebo alternatívou s vyšším dôrazom k textovým tlačidlám.

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

Manipulácia s kliknutiami

Všetky komponenty akceptujú an po kliknutí handler, ktorý sa aplikuje na koreň DOM element.

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

Poznámka: Dokumentácia neuvádza natívne rekvizity v našej sekcii API komponentov.

Farba

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

Okrem toho pomocou predvolených farieb tlačidiel môžete pridať vlastné alebo zakázať tie, ktoré nepotrebujete.

Veľkosť

Túto vlastnosť použite pre väčšie alebo menšie tlačidlá.

tlačidlo Nahrať

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

Tlačidlá so štítkom a ikonou

Niekedy možno budete chcieť mať ikony pre určité tlačidlá, aby ste zlepšili UX aplikácie, pretože logá uznávame jednoduchšie ako obyčajný text.

Napríklad, Ak chceme tlačidlo vymazať, mali by ste ho označiť ikonou smetného koša.

 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>

Tlačidlo ikony

Tlačidlá ikon sa nachádzajú na paneloch nástrojov a paneloch aplikácií. Ikony sú vhodné pre prepínacie tlačidlá, ktoré umožňujú výber alebo zrušenie výberu. Označenie páči sa mi, pridanie alebo odstránenie akejkoľvek položky zo štítka.

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

Veľkosti

Použite veľkosť podpery pre väčšiu alebo menšiu ikonu v tlačidle.

zmeniť názov adresára linux

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

Farby

Použite color prop na aplikovanie farebnej palety témy na komponent.

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

Prispôsobenie

Nižšie sú uvedené príklady prispôsobenia nášho komponentu.

Tlačidlo načítania

Tlačidlá načítania môžu zobrazovať stav načítania a deaktivovať interakcie tlačidla.

 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>

Prepnutím tlačidla načítania zobrazíte prechod medzi nesúvisiacimi polohami.

Komplexné tlačidlo

Tlačidlo ikony, tlačidlo Text, obsiahnuté tlačidlá a plávajúce akčné tlačidlá sú zabudované do jedného komponentu, ktorý sa nazýva ButtonBase.

Na vytvorenie vlastných interakcií môžete použiť komponent nižšej úrovne.

Knižnice smerovania tretích strán

Navigácia klienta bez presnej cesty HTTP na server je jedinečný prípad použitia. Komponent ButtonBase poskytuje vlastnosti komponentu na spracovanie prípadu použitia.

Hranice

ButtonBase nastavuje udalosti ukazovateľa komponentu: none; na deaktivačnom tlačidle, ktoré bráni zobrazeniu deaktivovaného kurzora.

Ak chcete použiť 'nepovolené' , máte dve možnosti:

Iba CSS: V zakázanom stave môžete odstrániť štýl udalosti ukazovateľa element:

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

Hoci,

Mali by ste pridať udalosti ukazovateľa: none; keď ste potrebovali zobraziť popisy na zakázaných prvkoch.

Ak vykreslíte čokoľvek iné ako prvok tlačidla, kurzor sa nezmení. Napríklad odkaz element.

Zmena DOM. Tlačidlo môžete zabaliť:

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

Môže podporovať akýkoľvek prvok, napríklad odkaz element.

neštylizované

Komponent sa dodáva s neštylizovanou verziou. Je ideálny na vykonávanie náročných optimalizácií a zmenšenie veľkosti balíka.

API

Ako používať komponent tlačidla v ReactJS?

Tlačidlá umožňujú používateľom vykonávať akcie a voľby jediným klepnutím. Tento komponent je nám k dispozícii pre obsah používateľského rozhrania React a je veľmi jednoduché ho integrovať. V ReactJS môžeme použiť tlačidlový komponent pomocou nasledujúceho prístupu.

Vytvorenie aplikácie Reag a inštalácia modulov:

Krok 1: Vytvorte aplikáciu React pomocou nižšie uvedeného príkazu:

príkaz java return

 npx create-react-app foldername 

Krok 2: Po vytvorení priečinka projektu a názvu priečinka na navigáciu pomocou daného príkazu:

 cd foldername 

Krok 3: Nainštalujte Material-UI modul pomocou nasledujúceho príkazu po vytvorení aplikácie ReactJS:

 npm install @material-ui/core 

Štruktúra projektu: Bude to vyzerať nasledovne.

štruktúru projektu

App.js: Teraz musíte napísať nižšie uvedený kód do App.js súbor.

Tu je aplikácia predvolenou súčasťou, do ktorej sme napísali náš kód.

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; 

Kroky na spustenie aplikácie:

Spustite aplikáciu pomocou príkazu z koreňového adresára projektu:

 npm start 

Výkon: Teraz otvorte prehliadač a prejdite na http://localhost:3000/. Môžete vidieť výstup nižšie: