Дугмад омогућава корисницима да предузимају радње и доносе изборе једним додиром.

Они (дугмад) саопштавају радње које корисници могу извршити. Ваш кориснички интерфејс га поставља на места као што су доле:

• Модални прозори
• Формс
• Картице
• Траке са алаткама
• Основно дугме

Дугме долази у 3 варијанте: текст (подразумевано), садржан, и оцртано.

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

Дугме за текст

Дугмад за текст се користе за мање изражене радње, укључујући оне у дијалозима картица. На картицама, дугмад за текст ће нам помоћи да задржимо нагласак на садржају картице.

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

Цонтаинед Буттон

Садржана дугмад су наглашена, одликују се употребом елевације и испуне. Садржи радње које се примарно користе у нашој апликацији.

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

Можете уклонити коту помоћу онемогућавања Елеватион пропа.

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

Оутлинед Буттон

Обрубљена дугмад су дугмад са средњим нагласком. Они садрже основне радње, али не и главну радњу у апликацији.

цамелцасе питхон

Обручена дугмад су нижа алтернатива за садржавање дугмади или алтернатива са већим нагласком у односу на дугмад за текст.

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

Руковање кликовима

Све компоненте прихватају ан онЦлицк руковалац који се примењује на корен ДОМ елемент.

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

Напомена: У документацији се избегава помињање изворних реквизита у нашем АПИ делу компоненти.

Боја

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

Поред тога, коришћењем подразумеваних боја дугмади, можете додати прилагођене или онемогућити све што вам није потребно.

Величина

Користите ово својство за веће или мање дугмад.

Дугме за отпремање

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

Дугмад са ознаком и иконом

Понекад ћете можда желети да имате иконе за одређена дугмад како бисте побољшали корисничко искуство апликације, јер логотипе препознајемо лакше него обичан текст.

На пример, Ако желимо да избришемо дугме, требало би да га означите иконом канте за отпатке.

подвуци у маркдовн

 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>

Дугме са иконом

Дугмад са иконама се налазе на тракама са алаткама и тракама апликација. Иконе су прикладне за дугмад за пребацивање која омогућавају избор или поништавање избора. Као, додавање или уклањање било које ставке са етикете.

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

Величине

Користите реквизит за величину за већу или мању икону у дугмету.

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

Боје

Користите колор проп да примените палету боја теме на компоненту.

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

Подешавање

Испод су примери прилагођавања наше компоненте.

Дугме за учитавање

Дугмад за учитавање могу приказати стање учитавања и онемогућити интеракције дугмета.

 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>

Пребаците дугме за учитавање да бисте видели прелаз између неповезаних позиција.

Комплексно дугме

Дугме икона, дугме за текст, садржана дугмад и плутајућа дугмад за радњу уграђени су у једну компоненту која се зове БуттонБасе.

Можете узети компоненту нижег нивоа да бисте креирали прилагођене интеракције.

дискретна математичка негација

Библиотеке за рутирање трећих страна

Навигација клијентом без тачног ХТТП путовања до сервера је јединствен случај употребе. Компонента БуттонБасе пружа својства компоненте за руковање случајем употребе.

Границе

БуттонБасе поставља показиваче-догађаје компоненте: ниједан; на дугмету за онемогућавање, што спречава појаву онемогућеног курсора.

Ако желите да користите 'није дозвољено' , имате две опције:

Само ЦСС: Можете уклонити стил показивача-догађаја у онемогућеном стању елемент:

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

иако,

Требало би да додате показиваче-догађаје: ниједан; када је требало да прикажете описе алатки на онемогућеним елементима.

фонтови за гимп

Ако рендерујете било шта осим елемента дугмета, курсор се неће променити. На пример, веза елемент.

ДОМ промена. Дугме можете умотати:

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

Може подржати било који елемент, на пример, везу елемент.

унстилед

Компонента ће доћи са верзијом без стила. Идеалан је за тешке оптимизације и смањење величине пакета.

АПИ

Како користити компоненту дугмета у РеацтЈС-у?

Дугмад омогућавају корисницима да предузму своје радње и донесу изборе једним додиром. Ова компонента нам је доступна за Реацт УИ садржај и веома је лака за интеграцију. Можемо користити компоненту дугмета у РеацтЈС-у користећи следећи приступ.

Креирање реацт апликације и инсталирање модула:

Корак 1: Направите Реацт апликацију користећи доњу наредбу:

 npx create-react-app foldername 

Корак 2: Након креирања фасцикле пројекта и назив фасцикле за навигацију помоћу дате команде:

 cd foldername 

Корак 3: Инсталирајте Материал-УИ модул користећи следећу команду, након креирања РеацтЈС апликације:

 npm install @material-ui/core 

Структура пројекта: То ће изгледати овако.

15 од 100.00

структура пројекта

Апп.јс: Сада морате написати доњи код у Апп.јс фајл.

Овде је апликација подразумевана компонента коју смо написали у нашем коду.

ЈаваСцрипт

 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; 

Кораци за покретање апликације:

Покрените апликацију користећи команду из основног директоријума пројекта:

 npm start 

Излаз: Сада отворите претраживач и идите на хттп://лоцалхост:3000/. Можете видети доњи излаз: