Pogas ļauj lietotājiem veikt darbības un izdarīt izvēli ar vienu pieskārienu.
apakšvirknes metode Java
Tās (pogas) paziņo par darbībām, ko lietotāji var veikt. Jūsu lietotāja interfeiss to ievieto tālāk norādītajās vietās.
- Modālie logi
- Veidlapas
- Kartes
- Rīkjoslas
- Pamata poga
Pogai ir 3 varianti: teksts (noklusējums), ietverts, un izklāstīts.
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 ); } Teksta poga
Teksta pogas tiek izmantotas mazāk izteiktām darbībām, tostarp kartīšu dialoglodziņos veiktajām darbībām. Kartītēs teksta pogas palīdzēs mums saglabāt uzsvaru uz kartīšu saturu.
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 ); } Ietverta poga
Ietvertās pogas ir īpaši izceltas, un tās atšķiras ar pacēluma un aizpildījuma izmantošanu. Tajā ir ietvertas darbības, kuras galvenokārt tiek izmantotas mūsu lietotnē.
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 ); } Jūs varat noņemt pacēlumu, atspējojot pacēluma balstu.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Apzīmēta poga
Apzīmētās pogas ir vidēja uzsvara pogas. Tajos ir ietvertas būtiskas darbības, bet ne galvenā darbība lietotnē.
Apzīmētās pogas ir zemākā alternatīva, lai ietvertu pogas, vai lielāka uzsvara alternatīva teksta pogā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 ); } Klikšķu apstrāde
Visas sastāvdaļas pieņem an onClick apdarinātājs, kas tiek piemērots saknei DOM elements.
{ alert('clicked'); }} > Click me Piezīme. Dokumentācijā mūsu API komponentu sadaļā nav minēti vietējie rekvizīti.
Krāsa
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 ); } Turklāt, izmantojot noklusējuma pogu krāsas, varat pievienot pielāgotas vai atspējot visas nevajadzīgās.
java slēdža paziņojums
Izmērs
Izmantojiet šo rekvizītu lielākām vai mazākām pogām.
Augšupielādes poga
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 ); } Pogas ar etiķeti un ikonu
Dažkārt, iespējams, vēlēsities izmantot ikonas noteiktām pogām, lai uzlabotu lietojumprogrammas UX, jo mēs atpazīstam logotipus vieglāk nekā vienkāršu tekstu.
Piemēram, Ja mēs vēlamies dzēst pogu, atzīmējiet to ar atkritumu tvertnes ikonu.
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> Ikonas poga
Ikonu pogas atrodas rīkjoslās un lietotņu joslās. Ikonas ir piemērotas pārslēgšanas pogām, kas ļauj atlasīt vai atcelt atlasi. Patīk, pievienojot vai noņemot kādu vienumu no etiķetes.
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 ( ); } Izmēri
Izmantojiet izmēra rekvizītus lielākai vai mazākai ikonai pogā.
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 ( ); } Krāsas
Izmantojiet krāsu balstu, lai komponentam lietotu motīva krāsu paleti.
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 ( ); } Pielāgošana
Tālāk ir sniegti mūsu komponenta pielāgošanas piemēri.
Ielādes poga
Ielādes pogas var parādīt ielādes stāvokli un atspējot pogas mijiedarbību.
slf4j vs log4j
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> Pārslēdziet ielādes pogu, lai redzētu pāreju starp nesaistītām pozīcijām.
Sarežģīta poga
Ikonas poga, teksta poga, ietvertās pogas un peldošās darbības pogas ir iebūvētas vienā komponentā, ko sauc par ButtonBase.
Varat izmantot zemāka līmeņa komponentu, lai izveidotu pielāgotas mijiedarbības.
Trešās puses maršrutēšanas bibliotēkas
Klienta navigācija bez precīza HTTP brauciena uz serveri ir unikāls lietošanas gadījums. Komponents ButtonBase nodrošina komponenta rekvizītus, lai apstrādātu lietošanas gadījumu.
Robežas
ButtonBase iestata komponentu pointer-events: nav; uz atspējošanas pogas, kas novērš atspējota kursora parādīšanos.
Ja vēlaties izmantot 'nav atļauts' , jums ir divas iespējas:
Tikai CSS: Varat noņemt rādītāja notikumu stilu atspējotajā stāvoklī elements:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , Lai gan,
Jums vajadzētu pievienot rādītāja notikumus: nav; kad vajadzēja parādīt rīka padomus par atspējotajiem elementiem.
Ja atveidosiet kaut ko citu, izņemot pogas elementu, kursors nemainīsies. Piemēram, saite elements.
DOM maiņa. Jūs varat ietīt pogu:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Tas var atbalstīt jebkuru elementu, piemēram, saiti elements.
nestilēts
Komponents tiks piegādāts bez stila versijas. Tas ir ideāli piemērots, lai veiktu smagu optimizāciju un samazinātu komplekta izmēru.
string.contains java
API
Kā izmantot pogas komponentu ReactJS?
Pogas ļauj lietotājiem veikt savas darbības un izdarīt izvēli ar vienu pieskārienu. Šis komponents mums ir pieejams React UI saturam, un to ir ļoti viegli integrēt. Mēs varam izmantot pogas komponentu ReactJS, izmantojot šādu pieeju.
React lietotnes izveide un moduļu instalēšana:
1. darbība: Izveidojiet React lietojumprogrammu, izmantojot tālāk norādīto komandu:
npx create-react-app foldername
2. darbība: Pēc projekta mapes izveidošanas un mapes nosaukuma, lai tajā pārvietotos, izmantojot doto komandu:
cd foldername
3. darbība: Instalējiet Materiāls-UI moduli, izmantojot šādu komandu pēc ReactJS lietojumprogrammas izveides:
sapludināšanas algoritms
npm install @material-ui/core
Projekta struktūra: Tas izskatīsies šādi.
projekta struktūra
App.js: Tagad jums ir jāieraksta zemāk esošais kods App.js failu.
Šeit lietotne ir noklusējuma komponents, kurā esam ierakstījuši savā 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; Lietojumprogrammas palaišanas darbības:
Palaidiet lietojumprogrammu, izmantojot komandu no projekta saknes direktorija:
npm start
Izvade: Tagad atveriet pārlūkprogrammu un dodieties uz http://localhost:3000/. Jūs varat redzēt zemāk esošo izvadi:
