如何在Material UI中使用Fab组件

Fab组件是浮动动作按钮的一个简称。你可能已经在许多Android应用程序中看到了右下角的浮动动作按钮。然而，你需要在右下角添加浮动动作按钮并不固定，但这是最常用的地方。

用户可以使用Material UI的Fab组件来创建不同图标的浮动动作按钮。

要开始使用Material UI，请在React项目目录下的终端执行以下命令。

npm install @mui/material @emotion/react @emotion/styled

语法

用户可以按照下面的语法来使用Material UI的Fab组件。

<Fab aria-label="edit icon">
   // add icon here
</Fab>

在上述语法中，我们需要在Fab组件的打开和关闭之间添加图标或文本。

例子

在下面的例子中，我们已经从Material UI库中导入了Fab组件。之后，我们在Fab组件中添加了不同的图标。在输出中，用户可以观察到第一个浮动的动作按钮包含菜单图标，第二个浮动的动作按钮包含编辑图标。

import React from "react";
import Fab from "@mui/material/Fab";
import EditIcon from "@mui/icons-material/Edit";
import MenuIcon from "@mui/icons-material/Menu";
const App = () => {
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Fab </i> Component of the Material UI to add a fab icon in the React application. {" "}
         </h3>
         <div>
            <Fab color = "primary" aria-label = "menu icon">
               <MenuIcon />
            </Fab>
         </div>
         <div style = {{marginTop: "10px"}}>
            <Fab aria-label = "edit icon">
               <EditIcon />
            </Fab>
         </div>
      </div>
   );
};
export default App;

输出

如何在Material UI中使用Fab组件？

例子

在下面的例子中，我们已经创建了不同大小的浮动动作按钮。我们使用了’size’道具来改变浮动动作按钮的大小。当我们把 “小”、”中 “和 “默认 “作为一个尺寸道具值时，用户可以在输出中看到浮动动作按钮的尺寸。

此外，我们还将颜色作为Fab组件的一个道具，以改变Fab组件的背景颜色。

import React from "react";
import Fab from "@mui/material/Fab";
import MenuIcon from "@mui/icons-material/Menu";
const App = () => {
   return (
      <div>
         <h3>
            {" "}
            Using the <i> Fab </i> Component of the Material UI to add a fab icon of different sizes in the React application. {" "}
         </h3>
         <div>
            <Fab color = "secondary" size = "small" aria-label = "add icon">
               <MenuIcon />
            </Fab> 
         </div>
         <div style = {{ marginTop: "10px" }}>
            <Fab color = "secondary" size = "medium" aria-label = "menu icon">
               <MenuIcon />
            </Fab>
         </div>
         <div style = {{ marginTop: "10px" }}>
            <Fab color = "secondary" aria-label = "menu icon">
               <MenuIcon />
            </Fab>
         </div>
      </div>
   );
};
export default App;