材料 UI：使菜单项向下

材料 UI 是谷歌开发的一种用户界面设计语言，可用于开发 Web、iOS 和 Android 应用程序。材料 UI 遵循谷歌对移动设备和桌面系统的设计原则。

本文将向您介绍如何使用材料 UI，使菜单项向下展开。

前置条件

在本文中，我们将使用 React 和 Material-UI 库。Material-UI 是一个 React 组件库，提供了一系列可重用的组件，可以帮助我们快速构建漂亮的用户界面。

安装 React 和 Material-UI：

npm install react
npm install @material-ui/core

菜单项向下

当用户点击菜单时，常常需要弹出一个下拉菜单。在材料 UI 中，使用 Menu 组件可以轻松实现此功能。

以下是一个示例代码片段，该代码段演示了如何将下拉菜单添加到应用程序中。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
  },
}));

export default function SimpleMenu() {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div className={classes.root}>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
        Open Menu
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

以上代码片段中的 Menu 组件包含三个 MenuItem 组件，当用户单击 Button 组件时，下拉菜单将在该按钮的位置下展开。

结论

以上是如何使用材料 UI，使菜单项向下展开的简介。使用 Menu 组件，我们可以在应用程序中轻松添加下拉菜单。感谢您的阅读！