Как использовать Fab Component в пользовательском интерфейсе материалов?

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

Fab означает плавающую кнопку действия, которая появляется перед всем содержимым экрана, как правило, в виде круглой формы со значком в центре. Материал UI для React имеет этот компонент, доступный для нас, и его очень легко интегрировать. Его можно использовать для включения или выключения опции. Мы можем использовать компонент Fab в ReactJS, используя следующий подход:

Создание приложения React и установка модуля:

Шаг 1: Создайте приложение React с помощью следующей команды:

npx create-react-app foldername

Шаг 2: После создания папки проекта, т. е. имя папки , перейдите к ней с помощью следующей команды:

cd foldername

Шаг 3: После создания приложения ReactJS установите модули material-ui , используя следующую команду:

npm install @mui/material
npm install @mui/icons-material

Структура проекта: Это будет выглядеть следующим образом.

Пример 1. В этом примере мы создадим простое приложение, которое использует компонент Fab для отображения плавающей кнопки действия со значком внутри нее. Обновите файл App.js, как показано ниже.

Имя файла: App.js

Javascript

import { Fab } from "@mui/material";
import React from "react";
import EditIcon from "@mui/icons-material/Edit";
  
const App = () => {
  
    return (
        <div style={{
            margin: "auto",
            display: "block",
            width: "fit-content"
        }}>
            <h3>How to use Fab Component in ReactJS?</h3>
            <Fab color="secondary" aria-label="edit">
                <EditIcon />
            </Fab>
        </div>
    );
}
  
export default App;

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

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Пример 2. В этом примере мы создадим простое приложение, использующее компонент Fab для отображения различных плавающих кнопок действий разного размера. Обновите файл App.js, как показано ниже.

Имя файла: App.js

Javascript

import { Fab } from "@mui/material";
import React from "react";
import EditIcon from "@mui/icons-material/Edit";
  
const App = () => {
  
    return (
        <div style={{
            margin: "auto",
            display: "block",
            width: "fit-content"
        }}>
            <h3>How to use Fab Component in ReactJS?</h3>
            <div style={{ display: "flex", gap: "5px" }}>
                <Fab size="small" color="secondary" 
                    aria-label="edit">
                    <EditIcon />
                </Fab>
                <Fab size="medium" color="secondary" 
                    aria-label="edit">
                    <EditIcon />
                </Fab>
                <Fab color="secondary" aria-label="edit">
                    <EditIcon />
                </Fab>
            </div>
        </div>
    );
}
  
export default App;

Шаги для запуска приложения:

npm start

Выход:

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

JavaScript

Как использовать Fab Component в пользовательском интерфейсе материалов?

Javascript

Javascript

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