Кнопка Material UI в React

Введение

Material UI — это динамическая библиотека React, поскольку она предоставляет множество компонентных инфраструктур для отзывчивого веб-дизайна. Одним из таких важных компонентов является Button.

В этой статье мы подробно рассмотрим компонент MUI Button, его разновидности и различные способы его использования в приложении React.

Шаги, которые мы рассмотрим:

• Что такое Material UI
• Начало работы с компонентом MUI Button
• Как использовать компонент MUI Button в вашем проекте React
• Создание пользовательского интерфейса калькулятора со светлым и темным режимом с помощью компонента React MUI Button Component

Что такое Material UI

Material UI — это библиотека компонентов React с открытым исходным кодом, основанная на Material Design от Google. Она включает в себя полный набор инструментов пользовательского интерфейса, помогающих разработчикам создавать и поддерживать приложения React, а также эффективно импортировать компоненты в различные части своих проектов. С годами все больше разработчиков внедряют Material UI в свои проекты, поскольку он значительно упрощает и ускоряет процесс веб-дизайна.

Категории компонентов, которые Material UI может предоставить вам, включают компоненты макета, компоненты навигации, компоненты ввода и компоненты отображения данных. Компонент Button входит в число компонентов Input.

Установите библиотеку MUI в свой проект как часть зависимостей package.json с помощью следующей команды:

Использовать npm

Использовать yarn

Начало работы с компонентом MUI Button

Компонент Material UI Button предоставляет разработчикам инструменты, необходимые для того, чтобы пользователи могли выполнять действия и принимать решения одним нажатием/кликом. Кнопки представляют собой действия, которые могут выполнять пользователи.
Они обычно размещаются в пользовательском интерфейсе в формах, навигационных панелях, карточках, модальных всплывающих окнах и т.д.

Компонент Material UI Button обычно поставляется в трех вариантах:

• Текстовая кнопка (вариант по умолчанию)
• Содержащаяся кнопка
• Очерченная кнопка

Вот иллюстрация того, как вы можете применить эти варианты MUI Button в вашем приложении React:

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

const BasicButtons = () => {
  return (
    <div>
        <Stack spacing={2} direction="row">
            <Button variant="text">Text</Button>
            <Button variant="contained">Contained</Button>
            <Button variant="outlined">Outlined</Button>
        </Stack>
    </div>
  );
}

export default BasicButtons;

Вот как они выглядят:

Цвета кнопок MUI

Вы можете использовать реквизит color, чтобы применить цвет к кнопкам Material UI из палитры тем.

<Button color="secondary">Secondary color theme</Button>
<Button variant="contained" color="success">
    Success color theme
</Button>
<Button variant="outlined" color="error">
    Error color theme
</Button>

Размеры кнопок MUI

Вы можете настроить размер кнопок Material UI с помощью параметра size:

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

const ButtonSizes = () => {
  return (
    <Box sx={{ '& button': { m: 1 } }}>
      <div>
        <Button size="small">Small Text Button</Button>
        <Button size="medium">Medium Text Button</Button>
        <Button size="large">Large Text Button</Button>
      </div>
      <div>
        <Button variant="outlined" size="small">
          Small Outlined Button
        </Button>
        <Button variant="outlined" size="medium">
          Medium Outlined Button
        </Button>
        <Button variant="outlined" size="large">
          Large Outlined Button
        </Button>
      </div>
      <div>
        <Button variant="contained" size="small">
          Small Contained Button
        </Button>
        <Button variant="contained" size="medium">
          Medium Contained Button
        </Button>
        <Button variant="contained" size="large">
          Large Contained Button
        </Button>
      </div>
    </Box>
  );
}

export default ButtonSizes

Вот результат:

Как использовать компонент Material UI Button в вашем проекте React

Текстовая кнопка

Текстовые кнопки обычно используются для менее заметных действий, например, в диалогах и карточках. Текстовые кнопки в карточках помогают удерживать внимание на содержимом карточки.

Вот простая иллюстрация текстовой кнопки MUI

<Button>Primary</Button>
<Button disabled>Disabled Text</Button>
<Button href="#text-buttons">Link Button</Button>

Это состояние по умолчанию для компонента Material UI Button, поэтому вам не обязательно определять именно этот вариант реквизита при вызове компонента Button.

Содержащаяся кнопка

Содержащиеся кнопки — это кнопки с высоким уровнем акцента, которые можно определить по их высоте и заливке. Они обозначают основные действия ваших приложений. Чтобы использовать содержащуюся кнопку, необходимо установить вариант contained при вызове компонента MUI Button.

Вот пример:

<Button variant="contained">Contained Button</Button>
<Button variant="contained" disabled>
    Disabled Contained Button
</Button>
<Button variant="contained" href="#contained-buttons">
    Link Contained Button
</Button>

Выделенная кнопка

Выделенные кнопки — это кнопки со средним выделением, содержащие действия, которые являются важными, но не основными в вашем приложении. Кроме того, выделенные кнопки можно использовать в качестве альтернативы текстовым кнопкам с большим акцентом или альтернативы кнопкам с меньшим акцентом.

Вы можете использовать кнопку Outlined MUI, указав параметр outlined при вызове компонента Button.

<Button variant="outlined">Primary Outlined Button</Button>
<Button variant="outlined" disabled>
    Disabled Outlined Button
</Button>
<Button variant="outlined" href="#outlined-buttons">
    Link Outlined Button
</Button>

IconButton

Кнопка с иконкой — это кнопка, представленная набором иконок для выполнения определенного действия. Кнопки-иконки обычно встречаются на панелях приложений и панелях инструментов. Иконки также подходят для кнопок-переключателей, которые позволяют выбрать или отменить выбор одного параметра, например, добавить или убрать звезду с элемента.

Чтобы включить кнопку с иконкой в свое приложение React, импортируйте и используйте компонент IconButton. Затем вы можете использовать любую иконку из Material UI.

Вот простая иллюстрация:

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import CameraIcon from '@mui/icons-material/Camera';
import DeleteIcon from '@mui/icons-material/Delete';
import CancelIcon from '@mui/icons-material/Cancel';
import AttachEmailIcon from '@mui/icons-material/AttachEmail';

const IconButtons = () => {
  return (
    <Stack direction="row" spacing={1}>
      <IconButton aria-label="camera">
        <CameraIcon />
      </IconButton>
      <IconButton aria-label="delete" disabled color="primary">
        <DeleteIcon />
      </IconButton>
      <IconButton color="secondary" aria-label="cancel">
        <CancelIcon />
      </IconButton>
      <IconButton color="primary" aria-label="attach email">
        <AttachEmailIcon />
      </IconButton>
    </Stack>
  );
}

export default IconButtons

Вот результат:

Кнопка загрузки

Кнопки загрузки — это кнопки, которые могут отображать статус загрузки действий в ваших приложениях React и отключать взаимодействия. Чтобы использовать компонент LoadingButton, необходимо сначала установить зависимость Material UI lab с помощью следующей команды:

npm i @mui/lab

Теперь вы можете импортировать компонент LoadingButton из зависимости Material UI lab и использовать его по своему усмотрению. Вы можете настроить свои компоненты LoadingButton, добавив параметр loading, который показывает, что кнопка загружается в пользовательском интерфейсе вашего приложения. Вы также можете установить реквизит loadingIndicator.

Вот простая иллюстрация использования компонента LoadingButton в вашем приложении React:

import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import SaveIcon from '@mui/icons-material/Save';
import Stack from '@mui/material/Stack';

const LoadingButtons = () => {
  return (
    <Stack direction="row" spacing={2}>
      <LoadingButton loading variant="outlined">
        Submit
      </LoadingButton>
      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
        Fetch data
      </LoadingButton>
      <LoadingButton
        loading
        loadingPosition="start"
        startIcon={<SaveIcon />}
        variant="outlined"
      >
        Save
      </LoadingButton>
    </Stack>
  );
}

export default LoadingButtons;

Вот результат:

Кнопки с иконками и ярлыками

Поскольку мы чаще распознаем логотипы, чем простой текст, вы можете иногда захотеть добавить значки к определенным кнопкам, чтобы улучшить пользовательский опыт приложения. Когда компонент icon назначается реквизиту startIcon или endIcon, значок выравнивается по левому или правому краю метки.

Вот простая иллюстрация:

import * as React from 'react';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import Stack from '@mui/material/Stack';

 const IconLabelButtons = () => {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="outlined" startIcon={<AddIcon />}>
        Add
      </Button>
      <Button variant="contained" endIcon={<DeleteIcon />}>
        Remove
      </Button>
    </Stack>
  );
}
export default IconLabelButtons

Создание пользовательского интерфейса калькулятора со светлым и темным режимом с помощью компонента React MUI Button Component

Кнопки Material UI можно использовать для различных целей в вашем приложении React. Вы можете использовать их для выполнения действий, переключения каталогов и выполнения определенных команд в вашем приложении. Мы можем продемонстрировать некоторые из их применений и функций в пользовательском интерфейсе Calculator с функциями переключения светлого и темного режимов.

Приложение будет состоять из двух компонентов:
Компонент Navbar
Главный компонент

Компонент Navbar

Этот компонент просто содержит переключатель светлого и темного режимов. Для этого мы будем использовать кнопки-иконки ToggleOn и ToggleOff.

Вот код для компонента Navbar:

import React from "react";
import IconButton from '@mui/material/IconButton';
import ToggleOnIcon from '@mui/icons-material/ToggleOn';
import ToggleOffIcon from '@mui/icons-material/ToggleOff';

const Navbar = () => {
  return (
    <>
    <nav>
        <p>Light</p>
        <div>
          {darkMode ? (
                <IconButton >
                <ToggleOnIcon sx={{ fontSize: 50 }} onClick={handleToggle} className={darkMode ? "toggle-light" : "toggle-dark"} />
                </IconButton>
                ) : (

                <IconButton >
                <ToggleOffIcon sx={{ fontSize: 50 }} onClick={handleToggle} className={darkMode ? "toggle-light" : "toggle-dark"} />
                </IconButton>
             )}
        </div>
        <p>Dark</p>
    </nav>
    </>
  )
}

export default Navbar

Код выше демонстрирует использование кнопок переключения Material UI для создания адекватной темы переключения светлого и темного режимов.

Вот результат:

Главный компонент

Этот компонент содержит систему сетки калькулятора со всеми кнопками, импортированными из Material UI.

Вот код:

import React from "react";
import Button from "@mui/material/Button";

const Main = () => {
 const buttonTexts = ['DEL', '÷', 1, 2, 3, '*', 4, 5, 6, '+', 7, 8, 9, '-', '.', 0,];

    return (
        <main>
            <div class="calculator-grid">
                <div class="output">
                    <div data-previous-operand class="previous-operand"></div>
                    <div data-current-operand class="current-operand"></div>
                </div>
                <Button class="span-two" variant="contained">
                    AC
                </Button>
                {buttonTexts.map((buttonText) => (
                    <Button variant="contained">{buttonText}</Button>
                ))}
                <Button variant="contained" class="span-two">
                    =
                </Button>
            </div>
        </main>
    );
};

export default Main;

Вот результат:

Вы можете переключать светлый и темный режим в App.js следующим образом:

import './App.css';
import React, { useState } from "react";
import Navbar from './Components/Navbar';
import Main from './Components/Main';

function App() {
  const [darkMode, setDarkMode] = useState("false");

  const handleToggle = () => {
    setDarkMode(prevDarkMode => !prevDarkMode);

}

  return (
    <div className={darkMode ? "dark": "App"}>
      <Navbar handleToggle={handleToggle} darkMode={darkMode} />
      <Main />
    </div>
  );
}

export default App;

Вот как выглядит наше конечное приложение:

Заключение

В этой статье мы рассмотрели кнопки Material UI и их применение в различных областях приложения React. Мы также рассмотрели возможный вариант использования в пользовательском интерфейсе калькулятора с темами светлого и темного режимов. Вы можете получить доступ к исходному коду на моем GitHub Repo.
Вы также можете посмотреть развернутое приложение здесь.

Автор: Доро Ономе

Создавайте CRUD-приложения на основе React без ограничений

Современные CRUD-приложения должны потреблять данные из множества различных источников, от пользовательских API до внутренних сервисов, таких как Supabase, Hasura, Airtable и Strapi.

Если вы заинтересованы в бэкенд-агностичном, безголовом фреймворке, который может подключать 15+ источников данных благодаря встроенным провайдерам и плагинам сообщества, обратите внимание на refine.

refine — это фреймворк на основе React с открытым исходным кодом для создания CRUD-приложений без ограничений.
Он может ускорить время разработки до 3 раз без ущерба для свободы стиля, кастомизации и рабочего процесса проекта.

refine является безголовым по своей конструкции и подключает 30+ бэкенд-сервисов «из коробки», включая пользовательские REST и GraphQL API.

Посетите GitHub-репозиторий refine для получения дополнительной информации, демонстраций, учебников и примеров проектов.