React MUI 抽屉 API

MUI 是一个用户界面库，提供了预定义和可自定义的 React 组件，用于更快速、更轻松的网页开发。MUI 提供了一整套 UI 工具，有助于更快地发布新功能。在本文中，让我们讨论 MUI 库提供的 TablePagination API。

抽屉组件基本上是从屏幕边缘滑入的面板。它用于显示多个导航链接。可以打开抽屉执行一个或多个操作，关闭后面板将再次滑到边缘。这样可以减少 UI 混乱。在本文中，我们将学习抽屉组件的骨干——MUI 抽屉 API。

语法：

<Drawer>
    <MenuItem>Foo</MenuItem>
    <MenuItem>Bar</MenuItem>
</Drawer>

创建React App：

步骤1： 使用create-react-app初始化应用程序。

npx create-react-app myApp

步骤2： 进入项目目录。

cd myApp

安装 MUI： 可以使用诸如 npm 或 yarn 的软件包管理器轻松进行安装。

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

或者

yarn add @mui/material @emotion/react @emotion/styled

导入 MUI 抽屉 API 到项目中:

import Drawer from '@mui/material/Drawer';
// or
import { Drawer } from '@mui/material';

Props列表：

anchor： 提供抽屉从哪一边出现的方向。可以是四个值之一 – left，right，top或bottom。
children： Drawer组件的内容。
classes： 用于覆盖或扩展应用于组件的样式。
elevation： 给出抽屉的高度或抬高的高度。默认值为 16。
hideBackdrop： 一个布尔值，表示是否隐藏背景。如果设置为 true，则不会渲染背景。
onClose： 当抽屉请求关闭时触发的回调函数。
open： 一个布尔值，表示抽屉是否打开。默认值为false。如果设置为 true，则会显示抽屉。
sx： 这是系统属性。允许我们为组件定义额外的 CSS 样式。
transitionDuration： 过渡的持续时间，以毫秒为单位。我们可以为所有过渡应用单个超时，也可以为每个过渡单独应用。
variant： 抽屉显示的变体类型。可以是永久变体，持久变体或临时变体。默认为临时变体。
除了上述列出的属性，所有 ModalProps、PaperProps 和 SlideProps 的属性也应用于 Drawer 组件。

CSS Rules：

root： 应用于根元素的样式。全局类为.MuiDrawer-root
docked： 此CSS规则表示仅当抽屉的变体为永久或持久时，样式将应用于根元素。
paper： 应用于Paper组件的样式。全局类为.MuiDrawer-paper
paperAnchorLeft： 此规则表示仅当锚点设置为左侧时，样式将应用于Paper组件。
paperAnchorRight： 此规则表示仅当锚点设置为右侧时，样式将应用于Paper组件。
paperAnchorTop： 此规则表示仅当锚点设置为顶部时，样式将应用于Paper组件。
paperAnchorBottom： 此规则表示仅当锚点设置为底部时，样式将应用于Paper组件。
paperAnchorDockedLeft： 此规则表示仅当锚点设置为左侧且变体设置为永久或持久时，样式将应用于Paper组件。
paperAnchorDockedTop： 此规则表示仅当锚点设置为顶部且变体设置为永久或持久时，样式将应用于Paper组件。
paperAnchorDockedRight： 此规则表示仅当锚点设置为右侧且变体设置为永久或持久时，样式将应用于Paper组件。
paperAnchorDockedBottom： 此规则表示仅当锚点设置为底部且变体设置为永久或持久时，样式将应用于Paper组件。
modal： 定义应用于Modal组件的样式。

示例1： 在此示例中，我们将创建一个临时抽屉，它在页面的所有内容上方打开，类似于带有阴影的模态背景。它可以切换打开或关闭。默认情况下，临时抽屉是关闭的。让我们使用MUI的Drawer API创建一个基本的临时抽屉。

import * as React from "react"; 
import Drawer from "@mui/material/Drawer"; 
import Button from "@mui/material/Button"; 
import MenuItem from "@mui/material/MenuItem"; 
  
export default function TemporaryDrawer() { 
    const [open, setOpen] = React.useState(false); 
  
    function handleOpen() { 
        setOpen(!open); 
    } 
  
    function handleClose() { 
        setOpen(false); 
    } 
  
    return ( 
        <> 
            <Button onClick={handleOpen}  
                variant="outlined" color="success"> 
                Toggle Drawer 
            </Button> 
            <Drawer anchor={"left"} open={open}  
                onClose={handleClose}> 
                <MenuItem>Geek</MenuItem> 
                <MenuItem>Geeks</MenuItem> 
                <MenuItem>GeeksForGeeks</MenuItem> 
            </Drawer> 
        </> 
    ); 
}

输出：

React MUI 抽屉 API

示例2： 在这个示例中，我们创建了永久可见的抽屉，它们始终显示在页面的左侧，并且与页面的内容在同一级别。永久抽屉无法关闭。以下代码生成一个始终打开的永久抽屉。

import * as React from "react"; 
import Box from "@mui/material/Box"; 
import Drawer from "@mui/material/Drawer"; 
import CssBaseline from "@mui/material/CssBaseline"; 
import AppBar from "@mui/material/AppBar"; 
import Toolbar from "@mui/material/Toolbar"; 
import List from "@mui/material/List"; 
import Typography from "@mui/material/Typography"; 
import Divider from "@mui/material/Divider"; 
import ListItem from "@mui/material/ListItem"; 
import ListItemButton from "@mui/material/ListItemButton"; 
import ListItemIcon from "@mui/material/ListItemIcon"; 
import ListItemText from "@mui/material/ListItemText"; 
import CodeIcon from "@mui/icons-material/Code"; 
import DeveloperModeIcon from "@mui/icons-material/DeveloperMode"; 
  
const drawerWidth = 240; 
  
export default function PermanentDrawerLeft() { 
    return ( 
        <Box sx={{ display: "flex" }}> 
            <CssBaseline /> 
            <AppBar 
                position="fixed"
                sx={{ width: `calc(100% - {drawerWidth}px)`,  
                    ml: `{drawerWidth}px` }} 
                color="success"
            > 
                <Toolbar> 
                    <Typography variant="h6" noWrap component="div"> 
                        GeeksForGeeks 
                    </Typography> 
                </Toolbar> 
            </AppBar> 
            <Drawer 
                sx={{ 
                    width: drawerWidth, 
                    flexShrink: 0, 
                    "& .MuiDrawer-paper": { 
                        width: drawerWidth, 
                        boxSizing: "border-box"
                    } 
                }} 
                variant="permanent"
                anchor="left"
            > 
                <Toolbar /> 
                <Divider /> 
                <List> 
                    {["Practice", "Write", "DSA",  
                        "Technical Scripter"].map( 
                        (text, index) => ( 
                            <ListItem key={text} disablePadding> 
                                <ListItemButton> 
                                    <ListItemIcon> 
                                        {index % 2 === 0 ? <CodeIcon /> :  
                                        <DeveloperModeIcon />} 
                                    </ListItemIcon> 
                                    <ListItemText primary={text} /> 
                                </ListItemButton> 
                            </ListItem> 
                        ) 
                    )} 
                </List> 
            </Drawer> 
            <Box 
                component="main"
                sx={{ flexGrow: 1, bgcolor: "background.default", p: 3 }} 
            > 
                <Toolbar /> 
                <Typography paragraph> 
                    Greetings to all the Geeks out there! We  
                    welcome you to the platform where we consistently 
                    strive to offer the best of education. This 
                    platform has been designed for every geek  
                    wishing to expand their knowledge, share their 
                    knowledge and is ready to grab their dream job. 
                    We have millions of articles, live as wellas 
                    online courses, thousands of tutorials and  
                    much more just for the geek inside you.  
                    Thank you for choosing and supporting us! 
                </Typography> 
            </Box> 
        </Box> 
    ); 
}