Ввод кнопок переключения React MUI
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/