Отображение значка React MUI

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

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/

Technical Scripter Picked

Отображение значка React MUI

Javascript

Javascript

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