Кнопки дозволяють користувачам виконувати дії та робити вибір одним дотиком.
Вони (кнопки) повідомляють про дії, які можуть виконувати користувачі. Його розміщує ваш інтерфейс користувача в таких місцях, як показано нижче:
- Модальні вікна
- Форми
- картки
- Панелі інструментів
- Основна кнопка
Кнопка доступна в 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 ); } Ви можете видалити висоту, вимкнувши опцію Elevation.
import * as React from 'react'; import Button from '@mui/material/Button'; export default function DisableElevation() { return ( Disable elevation ); } Окреслена кнопка
Окреслені кнопки – це кнопки із середнім виділенням. Вони містять важливі дії, але не основну дію в програмі.
Окреслені кнопки є нижчою альтернативою для розміщення кнопок або вищою альтернативою для текстових кнопок.
підручник java для початківців
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 ); } Обробка кліків
Усі компоненти приймають onClick обробник, який застосовується до кореня DOM елемент.
{ alert('clicked'); }} > Click me Примітка. У документації не згадуються нативні властивості в нашому розділі компонентів API.
Колір
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 ); } Кнопки з міткою та піктограмою
Іноді ви можете мати піктограми для певних кнопок, щоб покращити UX програми, оскільки ми визнаємо, що логотипи легше, ніж звичайний текст.
Наприклад, Якщо ми хочемо видалити кнопку, ви повинні позначити її значком смітника.
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> Значок кнопки
Кнопки-піктограми знаходяться на панелях інструментів і панелях програм. Піктограми підходять для кнопок перемикання, які дозволяють вибирати або скасовувати вибір. Як, додавання або видалення будь-якого елемента з мітки.
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 '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> Перемкніть кнопку завантаження, щоб побачити перехід між непов’язаними позиціями.
Складна кнопка
Кнопка «Піктограма», кнопка «Текст», вбудовані кнопки та плаваючі кнопки дії вбудовані в один компонент, який називається ButtonBase.
Ви можете взяти компонент нижчого рівня для створення спеціальних взаємодій.
Бібліотеки маршрутизації сторонніх виробників
Навігація клієнтом без точного HTTP-переходу до сервера є унікальним випадком використання. Компонент ButtonBase надає властивості компонента для обробки сценарію використання.
Кордони
ButtonBase встановлює компонент покажчик-події: немає; на кнопці відключення, яка запобігає появі вимкненого курсору.
Якщо ви хочете використовувати 'не дозволено' , у вас є два варіанти:
недоліки Інтернету
Лише CSS: Ви можете видалити стиль події вказівника у вимкненому стані елемент:
.uibuttonbase-root:disabled { cursor: not allowed; pointer-events: auto; , хоча,
Ви повинні додати покажчик-події: немає; коли потрібно було відобразити підказки для вимкнених елементів.
Якщо ви візуалізуєте щось, окрім елемента кнопки, курсор не зміниться. Наприклад, посилання елемент.
Зміна DOM. Ви можете обернути кнопку:
<span style="{{" cursor: 'not allowed' }}> disabled </span> Він може підтримувати будь-який елемент, наприклад, посилання елемент.
нестилізований
Компонент постачатиметься з версією без стилю. Він ідеально підходить для виконання серйозних оптимізацій і зменшення розміру комплекту.
API
Як використовувати компонент кнопки в ReactJS?
Кнопки дозволяють користувачам виконувати дії та робити вибір одним дотиком. Цей компонент доступний для вмісту React UI, і його дуже легко інтегрувати. Ми можемо використовувати компонент кнопки в ReactJS за допомогою наступного підходу.
Створення програми React та встановлення модулів:
Крок 1: Створіть програму React за допомогою наведеної нижче команди:
npx create-react-app foldername
крок 2: Після створення папки проекту та назви папки для навігації за допомогою наданої команди:
cd foldername
крок 3: Встановіть Material-UI модуль за допомогою наступної команди після створення програми ReactJS:
npm install @material-ui/core
Структура проекту: Це буде виглядати наступним чином.
структура проекту
рядок у масиві c
App.js: Тепер вам потрібно написати наведений нижче код у App.js файл.
Тут програма є компонентом за замовчуванням, який ми написали в нашому коді.
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; Кроки для запуску програми:
Запустіть програму за допомогою команди з кореневого каталогу проекту:
npm start
Вихід: Тепер відкрийте браузер і перейдіть до http://localhost:3000/. Ви можете побачити наведений нижче результат:
