有没有办法显示嵌套在Grid组件中的Material-UI Drawer? [英] Is there a way to show a Material-UI Drawer nested inside a Grid component?

问题描述

我正在使用Material-UI创建一个Web应用程序.主页分为3个网格，每个网格的 height 高度为 500px .我想显示一个抽屉，其中有一些中间网格内的动作选项.那可能吗?到目前为止，我只能相对于整个屏幕显示它.

这是我带有网格元素的主要组件:

  import React，{片段} from'react';从'@ material-ui/core/Grid'导入Grid;从'@ material-ui/core/Paper'导入纸张；const style = {纸: {填充:10，marginTop:5marginBottom:5，高度:500，overflowY:自动"，位置:相对"，}，Fab:{位置:绝对"，前5，左:5}，}导出默认值()=>{返回 (<片段><网格容器间距= {1}><网格项xs = {12} sm = {4} md = {4} lg = {2}>< Paper style = {style.Paper}></Paper></Grid><网格项xs = {12} sm = {8} md = {8} lg = {4}>< Paper style = {style.Paper}>< ToolbarDrawer/></Paper></Grid><网格项xs = {12} sm = {12} md = {12} lg = {6}>< Paper style = {style.Paper}></Paper></Grid></Grid></片段>);} 

这是我想显示在中间网格内的抽屉组件:

  javascript从'react'导入React，{片段};从'@ material-ui/core/IconButton'导入IconButton;从'@ material-ui/icons/ChevronRight'导入ChevronRightIcon；从'@ material-ui/icons/ChevronLeft'导入ChevronLeftIcon；从'@ material-ui/icons/MoveToInbox'导入InboxIcon；从'@ material-ui/icons/Mail'导入MailIcon；从'@ material-ui/core/styles'导入{makeStyles}；从'clsx'导入clsx;从'@ material-ui/core/Drawer'导入抽屉;从'@ material-ui/core/Divider'导入Divider;从'@ material-ui/core/ListItem'导入ListItem;从 '@material-ui/core/ListItemIcon' 导入 ListItemIcon；从'@ material-ui/core/ListItemText'导入ListItemText;从'@ material-ui/core/List'导入列表；从'@ material-ui/core/CssBaseline'导入CssBaseline;const抽屉宽度= 240;const useStyles = makeStyles(theme =>({抽屉: {宽度:抽屉宽度，flexShrink:0，whiteSpace:"nowrap"，}，抽屉打开:{宽度:抽屉宽度，过渡:theme.transitions.create('width'，{缓动:theme.transitions.easing.sharp，持续时间:theme.transitions.duration.enteringScreen，})，}，抽屉关闭:{过渡:theme.transitions.create('width'，{缓动:theme.transitions.easing.sharp，持续时间:theme.transitions.duration.leavingScreen，})，overflowX:隐藏"，宽度:theme.spacing(6)+ 1，[theme.breakpoints.up('sm')]:{宽度:theme.spacing(7)+ 1}，}，工具栏:{显示:"flex"，alignItems:'中心'，justifyContent:'flex-end'，填充:theme.spacing(0, 1),... theme.mixins.toolbar，}}));导出默认值()=>{const classes = useStyles();const [open，setOpen] = React.useState(false);函数handleToolbarClose(){setOpen(！open);}返回 (<片段>< CssBaseline/><抽屉anchor ="right"variant =永久"className = {clsx(classes.drawer，{[classes.drawerOpen]:打开，[classes.drawerClose]: !open,})}类别= {{论文:clsx({[classes.drawerOpen]:打开，[classes.drawerClose]:！open，})，}}打开= {打开}>< div className = {classes.toolbar}>< IconButton onClick = {handleToolbarClose}>{(打开) ?< ChevronRightIcon/>:< ChevronLeftIcon/>}</IconButton></div><除法器/><列表>{[收件箱"，已加星标"，发送电子邮件"，草稿"] .map((text，index)=>(< ListItem按钮key = {text}>< ListItemIcon> {索引％2 === 0吗?< InboxIcon/>:< MailIcon/>}</ListItemIcon>< ListItemText primary = {text}/></ListItem>))}</列表><除法器/><列表>{[''All mail'，'Trash'，'Spam'].map((text，index)=>(< ListItem按钮key = {text}>< ListItemIcon> {索引％2 === 0吗?< InboxIcon/>:< MailIcon/>}</ListItemIcon>< ListItemText primary = {text}/></ListItem>))}</列表></抽屉></片段>)} 

解决方案

看来您将不得不为此构建一个临时抽屉组件.这是您可以用来入门的示例:

I'm creating a web application using Material-UI. The main page is divided in 3 grids, each with a height of 500px. I wanted to display a drawer with some options of actions inside the middle grid. Is that possible? The way I have it so far I can only display it in relation to the whole screen.

Here's my main component with the grid elements:

import React, { Fragment } from 'react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const style = {
    Paper: {
        padding: 10,
        marginTop: 5,
        marginBottom: 5,
        height: 500,
        overflowY: 'auto',
        position: 'relative',
    },
    Fab: {
        position: 'absolute',
        top: 5,
        left: 5
    },
}

export default () => {
    return (
        <Fragment>
            <Grid container spacing={1}>
                <Grid item xs={12} sm={4} md={4} lg={2}>
                    <Paper style={style.Paper}>

                    </Paper>
                </Grid>

                <Grid item xs={12} sm={8} md={8} lg={4}>
                    <Paper style={style.Paper}>
                        <ToolbarDrawer />
                    </Paper>
                </Grid>

                <Grid item xs={12} sm={12} md={12} lg={6}>
                    <Paper style={style.Paper}>

                    </Paper>
                </Grid>
            </Grid>
        </Fragment>
    );
}

Here's my drawer component which I would like to be displayed nested inside the middle grid:

javascript

import React, { Fragment } from 'react';
import IconButton from '@material-ui/core/IconButton';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
import { makeStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import Drawer from '@material-ui/core/Drawer';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';

const drawerWidth = 240;

const useStyles = makeStyles(theme => ({
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
  drawerOpen: {
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerClose: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing(6) + 1,
    [theme.breakpoints.up('sm')]: {
      width: theme.spacing(7) + 1,
    },
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 1),
    ...theme.mixins.toolbar,
  }
}));

export default () => {
    const classes = useStyles();

    const [open, setOpen] = React.useState(false);

    function handleToolbarClose() {
        setOpen(!open);
    }

    return (
            <Fragment>
                <CssBaseline />
                <Drawer
                    anchor="right"
                    variant="permanent"
                    className={clsx(classes.drawer, {
                      [classes.drawerOpen]: open,
                      [classes.drawerClose]: !open,
                    })}
                    classes={{
                      paper: clsx({
                        [classes.drawerOpen]: open,
                        [classes.drawerClose]: !open,
                      }),
                    }}
                    open={open}
                >
                    <div className={classes.toolbar}>
                      <IconButton onClick={handleToolbarClose}>
                        {(open) ? <ChevronRightIcon /> : <ChevronLeftIcon />}
                      </IconButton>
                    </div>
                    <Divider />
                    <List>
                      {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
                        <ListItem button key={text}>
                          <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                          <ListItemText primary={text} />
                        </ListItem>
                      ))}
                    </List>
                    <Divider />
                    <List>
                      {['All mail', 'Trash', 'Spam'].map((text, index) => (
                        <ListItem button key={text}>
                          <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
                          <ListItemText primary={text} />
                        </ListItem>
                      ))}
                    </List>
                </Drawer>

            </Fragment>
        )   
}

解决方案

It looks like you're going to have to build a makeshift drawer component for this. Here is an example you could use to get started:

Live demo can be found here

MakeshiftDrawer using List component and Slide transition component:

export default function MakeshiftDrawer({ open }) {
  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  function handleListItemClick(event, index) {
    setSelectedIndex(index);
  }

  return (
    <Slide direction="right" in={open} mountOnEnter unmountOnExit>
      <div className={classes.root}>
        <List component="nav" aria-label="main mailbox folders">
          <ListItem
            button
            selected={selectedIndex === 0}
            onClick={event => handleListItemClick(event, 0)}
          >
            <ListItemIcon>
              <InboxIcon />
            </ListItemIcon>
            <ListItemText primary="Inbox" />
          </ListItem>
          <ListItem
            button
            selected={selectedIndex === 1}
            onClick={event => handleListItemClick(event, 1)}
          >
            <ListItemIcon>
              <DraftsIcon />
            </ListItemIcon>
            <ListItemText primary="Drafts" />
          </ListItem>
        </List>
        <Divider />
        <List component="nav" aria-label="secondary mailbox folder">
          <ListItem
            button
            selected={selectedIndex === 2}
            onClick={event => handleListItemClick(event, 2)}
          >
            <ListItemText primary="Trash" />
          </ListItem>
          <ListItem
            button
            selected={selectedIndex === 3}
            onClick={event => handleListItemClick(event, 3)}
          >
            <ListItemText primary="Spam" />
          </ListItem>
        </List>
      </div>
    </Slide>
  );
}

MakeshiftDrawer in use:

function App() {
  const [isOpen, setIsOpen] = useState(true);

  const toggle = () => {
    setIsOpen(!isOpen);
  }

  return (
    <div>
      <Grid container direction="row" style={topGridStyle}>
      </Grid>
      <Grid container direction="row" style={midGridStyle}>
        <Grid item>
          <Button variant="contained" color="primary" onClick={toggle}>Toggle</Button>
          <MakeshiftDrawer open={isOpen} />
        </Grid>
      </Grid>
      <Grid container direction="row" style={botGridStyle}>
      </Grid>
    </div>
  );
}

Rendered:

这篇关于有没有办法显示嵌套在Grid组件中的Material-UI Drawer?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！