Tlačítka umožňují uživatelům provádět akce a volby jediným klepnutím.

java řetězec na booleovský

Oni (tlačítka) sdělují akce, které mohou uživatelé provádět. Je umístěn vaším uživatelským rozhraním na místa, jako jsou níže:

• Modální okna
• formuláře
• Karty
• Panely nástrojů
• Základní tlačítko

Tlačítko se dodává ve 3 variantách: text (výchozí), obsažený, a nastíněno.

 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čítko

Textová tlačítka se používají pro méně výrazné akce, včetně těch v dialogových oknech karet. V kartách nám textová tlačítka pomohou udržet 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 ); } 

Obsažené tlačítko

Obsažená tlačítka jsou zdůrazněna, vyznačují se použitím elevace a výplně. Obsahuje akce, které se primárně používají v naší aplikaci.

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

Nadmořskou výšku můžete odstranit pomocí deaktivace prop.

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

Obrysové tlačítko

Obrysová tlačítka jsou tlačítka se středním důrazem. Obsahují základní akce, ale ne hlavní akce v aplikaci.

Obrysová tlačítka jsou nižší alternativou k tlačítkům nebo alternativou s vyšším důrazem k textovým tlačítků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 ); } 

Zvládání kliknutí

Všechny komponenty přijímají an při kliknutí handler, který se aplikuje na kořen DOM živel.

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

Poznámka: Dokumentace neuvádí nativní rekvizity v naší sekci API komponent.

Barva

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

Navíc pomocí výchozích barev tlačítek můžete přidat vlastní nebo deaktivovat ty, které nepotřebujete.

Velikost

Tuto vlastnost použijte pro větší nebo menší tlačítka.

tlačítko nahrát

 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čítka s popiskem a ikonou

Někdy možná budete chtít mít ikony pro určitá tlačítka, abyste zlepšili UX aplikace, protože uznáváme loga snadněji než prostý text.

Například, Pokud chceme tlačítko smazat, měli bychom jej označit ikonou popelnice.

 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čítko ikony

Tlačítka ikon se nacházejí na panelech nástrojů a panelech aplikací. Ikony jsou vhodné pro přepínací tlačítka, která umožňují výběr nebo zrušení výběru. To se mi líbí, přidávání nebo odebírání jakékoli položky ze štítku.

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

Velikosti

Použijte velikost podpěry pro větší nebo menší ikonu v tlačítku.

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

Barvy

Použijte color prop k použití palety barev motivu 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 ( ); } 

Přizpůsobení

Níže jsou uvedeny příklady přizpůsobení naší součásti.

Tlačítko načítání

Tlačítka načítání mohou zobrazovat stav načítání a deaktivovat interakce tlačítka.

mapa reagovat

 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>

Přepnutím tlačítka načítání zobrazíte přechod mezi nesouvisejícími pozicemi.

Složité tlačítko

Tlačítko ikony, tlačítko Text, obsažená tlačítka a plovoucí akční tlačítka jsou zabudovány do jediné komponenty, která se nazývá ButtonBase.

K vytvoření vlastních interakcí můžete použít komponentu nižší úrovně.

Směrovací knihovny třetích stran

Navigace klienta bez přesné cesty HTTP na server je jedinečný případ použití. Komponenta ButtonBase poskytuje vlastnosti komponenty pro zpracování případu použití.

Hranice

ButtonBase nastavuje události ukazatele komponenty: none; na tlačítku zakázání, které zabrání zobrazení deaktivovaného kurzoru.

Pokud chcete použít 'nepovoleno' , máte dvě možnosti:

Pouze CSS: Styl události ukazatele můžete ve stavu vypnuto odebrat živel:

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

Ačkoli,

Měli byste přidat události ukazatele: none; když jste potřebovali zobrazit popisky na zakázaných prvcích.

Pokud vykreslíte něco jiného než prvek tlačítka, kurzor se nezmění. Například odkaz živel.

Změna DOM. Tlačítko můžete zabalit:

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

Může podporovat jakýkoli prvek, například odkaz živel.

nestylovaný

Komponenta bude dodávána s nestylizovanou verzí. Je ideální pro provádění náročných optimalizací a snižování velikosti balíku.

API

Jak používat komponentu tlačítka v ReactJS?

Tlačítka umožňují uživatelům provádět akce a volby jediným klepnutím. Tato komponenta je nám k dispozici pro obsah uživatelského rozhraní React a je velmi snadné ji integrovat. Můžeme použít komponentu tlačítka v ReactJS pomocí následujícího přístupu.

Vytvoření aplikace Reag a instalace modulů:

Krok 1: Sestavte aplikaci React pomocí níže uvedeného příkazu:

 npx create-react-app foldername 

Krok 2: Po vytvoření složky projektu a názvu složky pro navigaci pomocí daného příkazu:

co je desktop.ini

 cd foldername 

Krok 3: Nainstalujte Materiál-UI modulu pomocí následujícího příkazu po vytvoření aplikace ReactJS:

 npm install @material-ui/core 

Struktura projektu: Bude to vypadat následovně.

struktura projektu

App.js: Nyní musíte napsat níže uvedený kód do App.js soubor.

Zde je aplikace výchozí komponentou, kterou jsme zapsali do našeho kódu.

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 ke spuštění aplikace:

Spusťte aplikaci pomocí příkazu z kořenového adresáře projektu:

 npm start 

Výstup: Nyní otevřete prohlížeč a přejděte na http://localhost:3000/. Můžete vidět níže uvedený výstup: