Material UI 的 Popper 组件是一个高度灵活的浮动元素，可以用于显示工具提示、下拉菜单、弹出框等。它基于 Popper.js 构建，支持复杂的定位逻辑，使得我们可以非常方便地在应用中添加动态和响应式的浮动内容。本文将深入探讨 Popper 的使用，包括所有重要属性和方法，并提供多个示例代码。

1. 基础概念

Popper 组件可以在任何 DOM 元素旁边显示内容，通过精确的定位使得其在用户界面中呈现出色的交互效果。

2. 安装 Material UI

确保你已经在项目中安装了 Material UI。如果尚未安装，可以使用以下命令：

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

3. Popper 组件的基本使用

3.1 引入必要的组件

首先，确保引入 Popper 和其他相关组件：

import React, { useState } from 'react';
import Popper from '@mui/material/Popper';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

3.2 创建基本的 Popper

下面是一个简单的 Popper 示例，它在按钮被点击时显示：

const SimplePopper = () => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : undefined;

  return (
    <div>
      <Button variant="contained" onClick={handleClick}>
        打开 Popper
      </Button>
      <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom">
        <Typography sx={{ p: 2 }}>这是一个简单的 Popper!</Typography>
      </Popper>
    </div>
  );
};

3.3 解释代码

• 状态管理：使用 useState 来管理 anchorEl，即 Popper 锚定的元素。
• 事件处理：handleClick 用于打开和关闭 Popper。
• Popper 属性：
  • open：布尔值，指示 Popper 是否显示。
  • anchorEl：指向锚定元素的引用。
  • placement：定义 Popper 相对于锚定元素的位置。

4. 属性和方法

4.1 重要属性

• open: 布尔值，指示 Popper 是否可见。
• anchorEl: 用于定义 Popper 的锚定元素。
• placement: 指定 Popper 显示的位置，支持的值包括 top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end。
• modifiers: 可以用来修改 Popper 的行为，如调整边距、避免溢出等。
• sx: 自定义样式，可以通过主题配置或直接在组件中使用。

4.2 重要方法

• handleClick: 处理点击事件以打开或关闭 Popper 的自定义方法。

5. 高级用法

5.1 动态内容与多个 Popper

我们可以根据不同的按钮创建多个 Popper，如下所示：

const MultiplePoppers = () => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'multiple-popper' : undefined;

  return (
    <div>
      <Button variant="contained" onClick={handleClick}>
        打开 Popper 1
      </Button>
      <Button variant="contained" onClick={handleClick}>
        打开 Popper 2
      </Button>
      <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom">
        <Typography sx={{ p: 2 }}>这是一个动态 Popper!</Typography>
      </Popper>
    </div>
  );
};

5.2 使用 Modifiers

你可以使用 modifiers 属性来增强 Popper 的功能，例如避免溢出：

const CustomPopper = () => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'custom-popper' : undefined;

  return (
    <div>
      <Button variant="contained" onClick={handleClick}>
        打开自定义 Popper
      </Button>
      <Popper
        id={id}
        open={open}
        anchorEl={anchorEl}
        placement="bottom"
        modifiers={[
          {
            name: 'offset',
            options: {
              offset: [0, 10], // 位置偏移
            },
          },
          {
            name: 'preventOverflow',
            options: {
              padding: 8, // 避免溢出的填充
            },
          },
        ]}
      >
        <Typography sx={{ p: 2 }}>这是一个自定义的 Popper!</Typography>
      </Popper>
    </div>
  );
};

5.3 自定义样式

可以使用 sx 属性自定义 Popper 的样式：

<Popper
  id={id}
  open={open}
  anchorEl={anchorEl}
  placement="bottom"
  sx={{
    backgroundColor: 'white',
    border: '1px solid #ccc',
    boxShadow: 3,
  }}
>
  <Typography sx={{ p: 2 }}>自定义样式的 Popper!</Typography>
</Popper>

6. 实际应用示例

下面是一个结合了 Button 和 Popover 的完整示例：

const App = () => {
  return (
    <div style={{ padding: '20px' }}>
      <SimplePopper />
      <MultiplePoppers />
      <CustomPopper />
    </div>
  );
};

7. 总结

Popper 组件为用户提供了一个灵活且强大的方式来展示浮动信息。通过本文的详细讲解和示例代码，您应该对 Popper 的使用、属性和方法有了深入的了解。在实际项目中，可以根据具体需求灵活使用 Popper 来增强用户体验。

如果你有任何疑问或建议，请随时在评论区留言！