Отображение значка React MUI
React MUI — это библиотека пользовательского интерфейса, которая предоставляет полностью загруженные компоненты, привнося нашу собственную систему дизайна в наши готовые к производству компоненты. MUI — это библиотека пользовательского интерфейса, которая предоставляет предопределенные и настраиваемые компоненты React для более быстрой и простой веб-разработки. Эти компоненты Material-UI основаны на Material Design от Google.
В этой статье мы обсудим отображение значков React MUI. Значок отображает небольшой значок в правом верхнем углу своего дочернего элемента. Значок может иметь несколько цветов и также состоит из свойств максимального значения, выравнивания и перекрытия.
React MUI Badge Props:
- anchorOrigin: обозначает якорь значка.
- badgeContent: содержит содержимое, отображаемое внутри значка.
- Children: Значок будет добавлен относительно этого узла.
- классы: переопределяет или расширяет стили, применяемые к компоненту.
- цвет: это цвет компонента.
- компонент: это компонент, используемый для корневого узла.
- компоненты: это компоненты, используемые для каждого слота внутри значка
- componentProps : это реквизиты, используемые для каждого слота внутри значка.
- invisible: если true, значок невидим.
- max: показывает максимальное значение.
- перекрытие: обернутая форма значка должна перекрываться.
- showZero: контролирует, будет ли значок скрыт, когда badgeContent равен нулю.
- slotProps: реквизит, используемый для каждого слота внутри значка.
- слоты: компоненты, используемые для каждого слота внутри значка.
- sx: системная поддержка, которая позволяет определять системные переопределения, а также дополнительные стили CSS.
- вариант: вариант для использования.
Синтаксис:
<Badge badgeContent={4} color="primary"> <Icon color="action" /> </Badge>
Создание проекта 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 Badge from "@mui/material/Badge" ; import Stack from "@mui/material/Stack" ; import BellIcon from "@mui/icons-material/Notifications" ; function App() { return ( <div> <div style={ { textAlign: "center" , color: "green" }}> <h1>GeeksforGeeks</h1> <h2>React MUI Badge Display</h2> </div> <div> <Stack spacing={2} direction= "row" justifyContent= "center" > <Badge badgeContent={1} color= "primary" anchorOrigin={{ vertical: "top" , horizontal: "left" , }} > <BellIcon color= "action" /> </Badge> <Badge badgeContent={2} color= "success" anchorOrigin={{ vertical: "top" , horizontal: "right" , }} > <BellIcon color= "action" /> </Badge> <Badge badgeContent={3} color= "secondary" anchorOrigin={{ vertical: "bottom" , horizontal: "right" , }} > <BellIcon color= "action" /> </Badge> <Badge badgeContent={4} color= "warning" anchorOrigin={{ vertical: "bottom" , horizontal: "right" , }} > <BellIcon color= "action" /> </Badge> </Stack> </div> </div> ); } export default App; |
Выход:
Пример 2. Пример ниже демонстрирует перекрытие значков React MUI с максимальным значением.
Javascript
import React from "react" ; import Badge from "@mui/material/Badge" ; import Stack from "@mui/material/Stack" ; import MailIcon from "@mui/icons-material/Mail" ; function App() { return ( <div> <div style={{ textAlign: "center" , color: "green" }}> <h1>GeeksforGeeks</h1> <h2>React MUI Badge Display</h2> </div> <div> <Stack spacing={2} direction= "row" justifyContent= "center" > <Badge badgeContent={100} overlap= "circular" color= "primary" > <MailIcon color= "action" /> </Badge> <Badge badgeContent={1000} max={999} color= "success" > <MailIcon color= "action" /> </Badge> </Stack> </div> </div> ); } export default App; |
Выход:
Ссылка: https://mui.com/material-ui/react-badge/