Ввод группы кнопок React MUI
React MUI — это библиотека пользовательского интерфейса, которая предоставляет полностью загруженные компоненты, привнося нашу собственную систему дизайна в наши готовые к производству компоненты. MUI — это библиотека пользовательского интерфейса, которая предоставляет предопределенные и настраиваемые компоненты React для более быстрой и простой веб-разработки. Эти компоненты Material-UI основаны на Material Design от Google.
В этой статье мы обсудим ввод группы кнопок React MUI. Компонент ButtonGroup используется для группировки связанных кнопок.
Типы групп кнопок:
- Варианты кнопок: здесь поддерживаются все стандартные варианты кнопок.
- Размеры и цвета: мы можем использовать параметры размера и цвета для управления внешним видом группы кнопок.
- Вертикальная группа: группа кнопок может отображаться вертикально с помощью свойства ориентации .
- Сплит-кнопка: ее также можно использовать для создания сплит-кнопки.
- Отключенная высота: высота группы кнопок может быть отключена.
Группа кнопок React MUI Input Props:
- детей: Обозначает содержание компонента
- классы: обозначает стили, которые переопределяют стили по умолчанию.
- цвет: обозначает цвет компонента
- компонент: обозначает компонент, используемый для корневого узла
- disabled: определяет, отключен ли компонент
- disableElevation: определяет, используется ли высота или нет.
- disableFocusRipple: определяет, отключена ли пульсация, когда компонент фокусируется с помощью клавиатуры.
- disableRipple: определяет, отключена ли анимация пульсации.
- fullWidth: определяет, будет ли кнопка занимать всю ширину контейнера.
- ориентация: обозначает ориентацию компонента
- size: Обозначает размер компонента
- sx: обозначает системную поддержку, которая позволяет определять системные переопределения и дополнительные стили CSS.
- вариант: Обозначает вариант компонента
Создание проекта 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 Button from "@mui/material/Button";import ButtonGroup from "@mui/material/ButtonGroup"; function App() { return ( <div> <div style={{ textAlign: "center", color: "green" }}> <h1>GeeksforGeeks</h1> <h2>React MUI Button group Input</h2> </div> <div style={{ textAlign: "center" }}> <ButtonGroup variant="outlined" aria-label="outlined button group" size="large"> <Button>Add</Button> <Button>Delete</Button> <Button>Edit</Button> </ButtonGroup> <ButtonGroup variant="text" aria-label="text button group" size="medium" style={{ marginLeft: 10 }}> <Button>Add</Button> <Button>Delete</Button> <Button>Edit</Button> </ButtonGroup> </div> </div> );} export default App; |
Выход:
Пример 2. В приведенном ниже примере показана группа вертикальных кнопок React MUI с отключенной высотой.
Javascript
import React from "react";import Button from "@mui/material/Button";import ButtonGroup from "@mui/material/ButtonGroup"; function App() { return ( <div> <div style={{ textAlign: "center", color: "green" }}> <h1>GeeksforGeeks</h1> <h2>React MUI Button group Input</h2> </div> <div style={{ textAlign: "center" }}> <ButtonGroup variant="contained" disableElevation orientation="vertical" aria-label="outlined button group" size="large" > <Button>Add</Button> <Button>Delete</Button> <Button>Edit</Button> </ButtonGroup> </div> </div> );} export default App; |
Выход:
Ссылка: https://mui.com/material-ui/react-button-group/