Бутоните позволява на потребителите да предприемат действия и да правят избор с едно докосване.

Те (бутони) съобщават действията, които потребителите могат да изпълняват. It is placed by your UI in places like below:

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

и

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

Обработка на щраквания

DOM елемент.

инструмент за лечение gimp

 { 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>

Сложен бутон

python __dict__

Граници

'не е позволено'

елемент:

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

Макар че,

Трябва да добавите указателни събития: няма; when you needed to display tooltips on disabled elements.

елемент.

Промяна на DOM. Можете да увиете бутона:

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

Може да поддържа всеки елемент, например връзка елемент.

камилски питон

API

rj12 срещу rj11

Етап 1:

 npx create-react-app foldername 

Стъпка 2:

 cd foldername 

Стъпка 3: Инсталирайте Material-UI

 npm install @material-ui/core 

Структура на проекта:

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

Сега трябва да напишете кода по -долу в файл.

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; 

 npm start 

Изход: Сега отворете браузъра си и отидете на http://localhost:3000/. Можете да видите изхода по-долу: