Ввод кнопок переключения React MUI

Опубликовано: 23 Февраля, 2023

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

В этой статье мы обсудим ввод кнопок переключения React MUI. Кнопка-переключатель используется для группировки связанных опций. ToggleButtonGroup используется для управления выбранным состоянием своих дочерних кнопок, когда ему задано собственное свойство value.

Реквизит кнопки переключения MUI React:

Children: Это компонент, похожий на строку таблицы.
классы: он переопределяет существующие стили или добавляет новые стили к компоненту.
компонент: это компонент, используемый для корневого узла.
sx: системная поддержка позволяет определять системные переопределения, а также дополнительные стили CSS.
значение: значение, связанное с кнопкой, когда вы выбираете ее в togglebuttongroup.
цвет: обозначает цвет ToggleButton.
disabled: если установлено значение true, кнопка-переключатель отключена.
disableFocusRipple: если установлено значение true, пульсация фокуса клавиатуры отключена.
fullWidth: если установлено значение true, кнопка переключения будет занимать всю ширину контейнера.
onChange: это функция обратного вызова при изменении кнопки-переключателя.
onClick: это функция обратного вызова при нажатии кнопки переключения.
selected: если установлено значение true, кнопка находится в активном состоянии.
размер: определяет размер кнопки.
sx: позволяет определять системные переопределения, а также дополнительные стили CSS.

React MUI Toggle Button Group Реквизиты:

Children: Это компонент, похожий на строку таблицы.
классы: он переопределяет существующие стили или добавляет новые стили к компоненту.
компонент: это компонент, используемый для корневого узла. Это может быть строка HTML или компонент.
value: обозначает значение кнопки.
цвет: обозначает цвет ToggleButton.
disabled: если установлено значение true, кнопка-переключатель отключена.
fullWidth: если установлено значение true, кнопка переключения будет занимать всю ширину контейнера.
onChange: это функция обратного вызова при изменении кнопки-переключателя.
onClick: это функция обратного вызова при нажатии кнопки переключения.
selected: если установлено значение true, кнопка находится в активном состоянии.
размер: определяет размер кнопки.
sx: системная поддержка позволяет определять системные переопределения, а также дополнительные стили CSS.
ориентация: это ориентация компонента.

Синтаксис:

<ToggleButtonGroup>
    <ToggleButton value="left">
        ...
    </ToggleButton>
    <ToggleButton value="center">
        ...
    </ToggleButton>
</ToggleButtonGroup>

Создание проекта React:

Шаг 1: Чтобы создать реагирующее приложение, вам необходимо установить реагирующие модули с помощью команды npm.

npm create-react-app project name

Шаг 2: После создания проекта реакции перейдите в папку для выполнения различных операций.

cd project name

Шаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:

npm install @mui/material @emotion/react @emotion/styled

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

Шаг для запуска приложения: откройте терминал и введите следующую команду.

npm start

Пример 1. В приведенном ниже примере демонстрируется компонент переключателя эксклюзивного выбора React MUI разных размеров.

Javascript

import React from "react";
import FormatAlignLeftIcon from 
    "@mui/icons-material/FormatAlignLeft";
import FormatAlignCenterIcon from 
    "@mui/icons-material/FormatAlignCenter";
import FormatAlignRightIcon from 
    "@mui/icons-material/FormatAlignRight";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from 
    "@mui/material/ToggleButtonGroup";
  
function App() {
    const [align, setAlign] = React.useState();
  
    const handleAlignment = (event, newAlign) => {
        setAlign(newAlign);
    };
  
    function ButtonGroup({ size }) {
        return (
            <ToggleButtonGroup
                size={size}
                value={align}
                exclusive
                onChange={handleAlignment}
                aria-label="text alignment"
            >
                <ToggleButton value="left" 
                    aria-label="left aligned">
                    <FormatAlignLeftIcon />
                </ToggleButton>
                <ToggleButton value="center" 
                    aria-label="centered">
                    <FormatAlignCenterIcon />
                </ToggleButton>
                <ToggleButton value="right" 
                    aria-label="right aligned">
                    <FormatAlignRightIcon />
                </ToggleButton>
            </ToggleButtonGroup>
        );
    }
  
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Toggle Button Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <ButtonGroup size="large" /> <br /><br />
                <ButtonGroup size="medium" /> <br /><br />
                <ButtonGroup size="small" />
            </div>
        </div>
    );
}
  
export default App;

Выход:

Пример 2. Пример ниже демонстрирует выровненные по вертикали кнопки множественного выбора React MUI.

Javascript

import React from "react";
import ToggleButton from "@mui/material/ToggleButton";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import FormatBoldIcon from "@mui/icons-material/FormatBold";
import FormatItalicIcon from "@mui/icons-material/FormatItalic";
import FormatUnderlinedIcon from 
    "@mui/icons-material/FormatUnderlined";
  
function App() {
    const [format, setFormat] = React.useState(() => ["bold"]);
  
    const handleFormat = (event, newFormat) => {
        setFormat(newFormat);
    };
  
    return (
        <div>
            <div style={{ textAlign: "center", 
                color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Toggle Button Input</h2>
            </div>
            <div style={{ textAlign: "center" }}>
                <ToggleButtonGroup
                    value={format}
                    onChange={handleFormat}
                    aria-label="text formatting"
                    orientation="vertical"
                >
                    <ToggleButton value="bold" 
                        aria-label="left aligned">
                        <FormatBoldIcon />
                    </ToggleButton>
                    <ToggleButton value="italic" 
                        aria-label="centered">
                        <FormatItalicIcon />
                    </ToggleButton>
                    <ToggleButton value="underline" 
                        aria-label="right aligned">
                        <FormatUnderlinedIcon />
                    </ToggleButton>
                </ToggleButtonGroup>
            </div>
        </div>
    );
}
  
export default App;

Выход:

Ссылка: https://mui.com/material-ui/react-toggle-button/

Technical Scripter Picked

Ввод кнопок переключения React MUI

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ