Przyciski umożliwiają użytkownikom podejmowanie działań i dokonywanie wyborów jednym dotknięciem.
One (przyciski) komunikują czynności, które użytkownicy mogą wykonać. Jest on umieszczany przez Twój interfejs użytkownika w miejscach takich jak poniżej:
- Okna modalne
- Formularze
- Karty
- Paski narzędzi
- Podstawowy przycisk
Przycisk występuje w 3 wariantach: tekst (domyślny), zawarty, I zarysowane.
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 ); } Przycisk tekstowy
Przyciski tekstowe służą do mniej wyraźnych działań, w tym w oknach dialogowych kart. Na kartach przyciski tekstowe pomogą nam utrzymać nacisk na zawartość kart.
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 ); } Zawarty przycisk
Zawarte w nich przyciski charakteryzują się dużym naciskiem, wyróżniającym się zastosowaniem elewacji i wypełnienia. Zawiera działania, które są najczęściej używane w naszej aplikacji.
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 ); } Możesz usunąć elewację za pomocą funkcji wyłączania podpory Elewacja.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Przedstawione przycisk
Zarysowane przyciski to przyciski o średnim nacisku. Zawierają istotne działania, ale nie stanowią głównej akcji w aplikacji.
c sformatowany ciąg
Przyciski z konturami to dolna alternatywa zawierająca przyciski lub alternatywa z większym naciskiem w stosunku do przycisków tekstowych.
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 ); } Obsługa kliknięć
Wszystkie komponenty akceptują na kliknięcie handler, który jest stosowany do katalogu głównego DOM element.
{ alert('clicked'); }} > Click me Uwaga: w dokumentacji nie wspominamy o natywnych rekwizytach w naszej sekcji API komponentów.
Kolor
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 ); } Ponadto, korzystając z domyślnych kolorów przycisków, możesz dodać własne lub wyłączyć te, których nie potrzebujesz.
Rozmiar
Użyj tej właściwości w przypadku większych lub mniejszych przycisków.
Przycisk Prześlij
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 ); } Przyciski z etykietą i ikoną
Czasami możesz chcieć mieć ikony dla niektórych przycisków, aby poprawić UX aplikacji, ponieważ uważamy, że logo jest łatwiejsze niż zwykły tekst.
Na przykład, Jeżeli chcemy usunąć przycisk to należy oznaczyć go ikoną kosza na śmieci.
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> Ikona przycisku
Przyciski ikon znajdują się na paskach narzędzi i paskach aplikacji. Ikony są odpowiednie dla przycisków przełączających, które umożliwiają zaznaczenie lub odznaczenie opcji. Podobnie jak dodanie lub usunięcie dowolnego elementu z etykiety.
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 ( ); } Rozmiary
Użyj opcji rozmiaru, aby wybrać większą lub mniejszą ikonę na przycisku.
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 ( ); } Zabarwienie
Użyj opcji kolorów, aby zastosować paletę kolorów motywu do 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 ( ); } Dostosowywanie
Poniżej znajdują się przykłady dostosowywania naszego komponentu.
Przycisk ładowania
Przyciski ładowania mogą pokazywać stan ładowania i wyłączać interakcje przycisku.
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> Przełącz przycisk ładowania, aby zobaczyć przejście między niepowiązanymi pozycjami.
Złożony przycisk
Przycisk ikon, przycisk tekstowy, zawarte w nich przyciski i pływające przyciski akcji są wbudowane w jeden komponent nazywany ButtonBase.
Możesz użyć komponentu niższego poziomu, aby utworzyć niestandardowe interakcje.
Biblioteki routingu innych firm
Nawigacja klienta bez dokładnej podróży HTTP do serwera jest wyjątkowym przypadkiem użycia. Komponent ButtonBase udostępnia właściwości komponentu umożliwiające obsługę przypadku użycia.
Granice
ButtonBase ustawia komponent pointer-events: none; na przycisku wyłączania, co zapobiega pojawieniu się wyłączonego kursora.
Jeśli chcesz skorzystać 'niedozwolony' , masz dwie możliwości:
Tylko CSS: Możesz usunąć styl zdarzenia wskaźnika w stanie wyłączonym element:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , Chociaż,
Powinieneś dodać zdarzenia wskaźnikowe: brak; kiedy trzeba było wyświetlić podpowiedzi na wyłączonych elementach.
Jeśli renderujesz coś innego niż element przycisku, kursor się nie zmieni. Na przykład link element.
Zmiana DOMU. Możesz owinąć przycisk:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Może obsługiwać dowolny element, na przykład link element.
niestylizowany
otwórz menu ustawień
Komponent będzie dostępny w wersji bez stylu. Jest idealny do wykonywania ciężkich optymalizacji i zmniejszania rozmiaru pakietu.
API
Jak używać komponentu przycisku w ReactJS?
Przyciski umożliwiają użytkownikom podejmowanie działań i dokonywanie wyborów jednym dotknięciem. Komponent ten jest dla nas dostępny dla treści React UI i jest bardzo łatwy w integracji. Możemy użyć komponentu przycisku w ReactJS, stosując następujące podejście.
Tworzenie aplikacji reagującej i instalacja modułów:
Krok 1: Zbuduj aplikację React, używając podanego poniżej polecenia:
npx create-react-app foldername
Krok 2: Po utworzeniu folderu projektu i nazwie folderu, aby nawigować po nim za pomocą podanego polecenia:
cd foldername
Krok 3: Zainstaluj Materiał-UI moduł za pomocą następującego polecenia, po utworzeniu aplikacji ReactJS:
npm install @material-ui/core
Struktura projektu: Będzie to wyglądać następująco.
struktura projektu
Aplikacja.js: Teraz musisz napisać poniższy kod w pliku Aplikacja.js plik.
W tym przypadku aplikacja jest domyślnym komponentem, w którym napisaliśmy nasz 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; Kroki, aby uruchomić aplikację:
Uruchom aplikację za pomocą komendy z katalogu głównego projektu:
npm start
Wyjście: Teraz otwórz przeglądarkę i przejdź do http://localhost:3000/. Możesz zobaczyć poniższe dane wyjściowe:
