React MUI Popover Util

React MUI是一个UI库，提供了全功能的组件，将我们自己的设计系统带入到我们准备好的组件中。MUI是一个用户界面库，为更快速和简单的网页开发提供了预定义且可自定义的React组件，这些Material-UI组件基于Google的Material Design。

在本文中，我们将讨论React MUI Popover Util。Popover用于在另一个组件的上方显示一些内容。

React MUI Popover：

基本Popover： 这是默认的Popover变体工具。
锚点 Playground： 在这里，我们可以调整anchorOrigin、transformOrigin位置、anchorReference、anchorPosition和anchorEl。
鼠标悬停交互： 用于为Popover添加悬停事件。
补充项目： 高级项目可以通过Popover工具实现。
PopupState helper： 在各种场景中负责Popover状态的处理。
API： 此组件中使用了2个API。
- <Grow />
- <Popover />

语法：

<Button>
    Open
</Button>
<Popover>
    <Typography>Your content.</Typography>
</Popover>

创建React项目：

步骤1： 要创建一个React应用程序，您需要通过npm命令安装React模块。

npm create-react-app project name

步骤2： 创建完你的React项目后，进入文件夹执行不同的操作。

cd project name

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需模块：

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

项目结构:

React MUI Popover Util

运行应用程序的步骤：

npm start

示例1： 以下示例演示了使用Popover组件的React MUI的用法。这里，Popover使用了两个属性：anchorOrigin和transformOrigin，用于设置Popover的位置。

import React, { useState } from "react"; 
import Popover from "@mui/material/Popover"; 
import Typography from "@mui/material/Typography"; 
import { Box, Button } from "@mui/material"; 
  
function App() { 
    const [containerEl, setContainerEl] = useState(null); 
  
    const handleOpen = (e) => { 
        setContainerEl(e.currentTarget); 
    }; 
  
    const handleClose = () => { 
        setContainerEl(null); 
    }; 
  
    const open = Boolean(containerEl); 
    const id = open ? "simple-popover" : undefined; 
  
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Popover Util</h2> 
            </div> 
            <center> 
                <Button aria-describedby={id}  
                    onClick={handleOpen}> 
                    Open 
                </Button> 
                <Popover 
                    id={id} 
                    open={open} 
                    anchorEl={containerEl} 
                    onClose={handleClose} 
                    anchorOrigin={{ 
                        vertical: "bottom", 
                        horizontal: "left", 
                    }} 
                    transformOrigin={{ 
                        vertical: "top", 
                        horizontal: "right", 
                    }} 
                > 
                    <Box sx={{ backgroundColor: "green", 
                         color: "white" }}> 
                        <Typography sx={{ p: 2 }}> 
                             Welcome to GeeksforGeeks 
                        </Typography> 
                    </Box> 
                </Popover> 
            </center> 
        </div> 
    ); 
} 
  
export default App;

输出：

React MUI Popover Util

示例2： 下面的示例演示了React MUI鼠标悬停交互的弹出组件。在这里，我们看到了如何使用Popover组件和鼠标悬停事件来实现弹出行为。

import React, { useState } from "react"; 
import Popover from "@mui/material/Popover"; 
import Typography from "@mui/material/Typography"; 
import { Box } from "@mui/system"; 
  
function App() { 
    const [containerEl, setContainerEl] = useState(null); 
  
    const handleOpen = (e) => { 
        setContainerEl(e.currentTarget); 
    }; 
  
    const handleClose = () => { 
        setContainerEl(null); 
    }; 
  
    const open = Boolean(containerEl); 
  
    return ( 
        <div> 
            <div style={{ textAlign: "center", color: "green" }}> 
                <h1>GeeksforGeeks</h1> 
                <h2>React MUI Popover Util</h2> 
            </div> 
  
            <div> 
                <Typography 
                    onMouseEnter={handleOpen} 
                    onMouseLeave={handleClose} 
                    sx={{ textAlign: "center" }} 
                > 
                    Hover 
                </Typography> 
                <Popover 
                    sx={{ 
                        pointerEvents: "none", 
                    }} 
                    open={open} 
                    anchorEl={containerEl} 
                    anchorOrigin={{ 
                        vertical: "bottom", 
                        horizontal: "center", 
                    }} 
                    transformOrigin={{ 
                        vertical: "top", 
                        horizontal: "right", 
                    }} 
                    onClose={handleClose} 
                    disableRestoreFocus 
                > 
                    <Box sx={{ backgroundColor: 'green', color: 'white' }}> 
                        <Typography sx={{ p: 6 }}> 
                            You just hovered! 
                        </Typography> 
                    </Box> 
                </Popover> 
            </div> 
        </div> 
    ); 
} 
  
export default App;