如何使用 Material UI 制作抽屉？

Material UI Drawer 是 Material UI 中使用最广泛的组件。 Material UI Drawer 用作网站的导航栏，它显示项目列表，然后单击项目，用户将被重定向到网页/网站的特定部分。在几乎所有网站中都可以看到它，因为它们提供了更好的用户交互并且易于在应用程序的不同部分之间导航。

Material UI Drawer的一些重要的props和类型如下图所示：

S.No	Prop Name	Allowed Values	Default Value	Description
1	anchor	‘bottom’, ‘left’, ‘top’,  ‘right’	left	Indicates the side from where the drawer will appear
2	open	true, false	false	Specifies whether the drawer should be visible or not
3	onClose	–	–	Callback method triggered when the drawer is requested to close
4	variant	‘permanent’, ‘persistent, ‘temporary’	temporary	Indicates the visibility status of the drawer

Material UI 大致提供了三种类型的 Drawers：

1. 临时抽屉： 仅当将 true 值传递给open道具时，此抽屉才会显示在网页上。通过为内容提供阴影背景，抽屉显示为当前网页顶部的模式，如下面的示例所示。

2. Persistent Drawer：这个drawer在给open prop传一个真值的时候在网页上是可见的，但是和临时的drawer不同的是，它通过调整网页的内容在当前网页中占据了一定的空间。

3. 永久抽屉：这里的抽屉始终对用户可见。这里不需要将open prop 传递给 Drawer 组件。

先决条件：一个小规模的工作 ReactJS 项目。

React Js的基础知识。

示例：我们将设计一个主页，其左上角有一个菜单图标，单击时显示两个菜单项，如下所示：

1. 关于我们
2. 联系我们

单击每个菜单时，都会将我们带到应用程序的相应页面。

模块安装：但在我们继续之前，我们需要将以下包安装到我们的项目中。打开终端并输入以下命令：

npm i @material-ui/core

它将 React 组件安装到我们的项目中。在我们的例子中，它安装了 Drawer 组件。

npm i react-router-dom

这为网站提供了路由组件。简而言之，这是将用户从应用程序的一个部分重定向到另一部分所必需的。

npm i @material-ui/icons

上述命令将安装 Material UI 图标。安装是可选的。

以上所有命令都应该对项目中的package.json进行更改，如下所示：

"dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    // Other dependencies starts from here
    ...................... 
  },

示例：1使用以下命令移动到您的src文件夹：

cd src

现在让我们创建三个网页，分别称为Home.js、About.js和Contact.js ，如下所示：

文件名：Home.js

Javascript

import React from 'react';
const styles = {
  home: {
    padding: '50px',
    textAlign: 'center',
    backgroundColor: '#28462f',
    color: 'white',
  }
};
export default class Home extends React.Component {
  render() {
    return 

    
Home Page
      
    
This is the Landing Page of the Application
  
;
  }
}

输出：

文件名：Contact.js

Javascript

import React from 'react';
const styles = {
  contact: {
    padding: '50px',
    textAlign: 'center',
    backgroundColor: '#46282d',
    color: 'white',
  }
};
  
export default class Contact extends React.Component {
  render() {
    return 

    
Contact Us Page
      
    
Some text about how to contact us.
  
;
  }
}

输出：

文件名：About.js

Javascript

import React from 'react';
const styles = {
  about: {
    padding: '50px',
    textAlign: 'center',
    backgroundColor: '#474e5d',
    color: 'white',
  }
};
  
export default class About extends React.Component {
  render() {
    return 

    
About Us Page
      
    
Some text about who we are and what we do.
  
;
  }
}

输出：

这些是我们通过单击抽屉在它们之间切换的页面。现在是时候集成所有上述组件了。创建另一个名为drawer.js的文件，如下所示：

文件名：drawer.js

Javascript

import React from 'react';
import { Drawer, Divider, IconButton } 
    from '@material-ui/core';
import { List, ListItem, ListItemIcon, ListItemText } 
    from '@material-ui/core';
import PermContactCalendarIcon from 
    '@material-ui/icons/PermContactCalendar';
import ReorderIcon from '@material-ui/icons/Reorder';
import AccountCircleIcon from 
    '@material-ui/icons/AccountCircle';
import { Link } from 'react-router-dom';
  
const styles = {
  sideNav: {
    marginTop: '-60px',
    zIndex: 3,
    marginLeft: '0px',
    position: 'fixed',
  },
  link: {
    color: 'black',
    textDecoration: 'none',
  }
};
  
export default class MarerialUIDrawer 
    extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDrawerOpened: false,
    };
  }
  toggleDrawerStatus = () => {
    this.setState({
      isDrawerOpened: true,
    })
  }
  closeDrawer = () => {
    this.setState({
      isDrawerOpened: false,
    })
  }
  render() {
    const { isDrawerOpened } = this.state;
    return (
      

         

            
              {!isDrawerOpened ?  : null }
            
          
          
        
          
            
              
                
                
                
              
            
          
          
          
            
              
              
              
            
            
          
        
      
    );
  }
}

在此示例中，我们使用了关于我们、联系我们的图标以及将为我们打开抽屉的按钮。也可以给出一些简单直观的名称（文本）来代替图标。

最后一步是为每个组件提供正确的路由模式，并在App.js中导入我们的 Drawer，如下所示：

文件名：App.js

Javascript

import './App.css';
import Home from './Home';
import Contact from './Contact';
import About from './About';
import MarerialUIDrawer from './drawer';
import { BrowserRouter, Route, Switch } 
    from 'react-router-dom';
  
function App() {
  return (
    

     
Material-UI Drawer
     
     
      
          }/>
          }/>
          }/>
      
    
    
  );
}
  
export default App;

输出：

注意：这是一个临时抽屉的例子。它将列表显示为左侧的模式（默认情况下）。在drawer.js 中为Drawer 组件添加一个锚属性，并给出一些值来观察变化。同样，更改变量属性值以检查持久和永久抽屉。

参考：进一步了解Material UI Drawer，请从以下链接查看官方文档：https://material-ui.com/