2017-10-12 69 views
0

根据docs,material-ui支持持久性抽屉。
但我的预期行为是像照片一样的剪辑持久性抽屉。材质UI中的修剪抽屉

enter image description here

我的侧边栏组件:

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { withStyles } from 'material-ui/styles'; 
import Drawer from 'material-ui/Drawer'; 
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'; 
import Face from 'material-ui-icons/Face'; 
import Person from 'material-ui-icons/Person'; 
import Assignment from 'material-ui-icons/Assignment'; 
import NavLink from 'react-router-dom/NavLink'; 
import { FormattedMessage } from 'react-intl'; 
import styles from '../../../../style/components/global/Sidebar.scss'; 

const cx = require('classnames/bind').bind(styles); 

const rootStyles = theme => ({ 
    list: { 
    width: 250, 
    flex: 'initial', 
    }, 
    drawer: { 
    top: 30, 
    }, 
}); 
class UndockedDrawer extends Component { 
    render() { 
    const { classes } = this.props; 
    const sidebarListItems = (
     <div> 
     <NavLink 
      to="/users" 
      className={cx('noStyle')} 
     > 
      <ListItem button> 
      <ListItemIcon> 
       <Person /> 
      </ListItemIcon> 
      <ListItemText primary={<FormattedMessage id="user" />} /> 
      </ListItem> 
     </NavLink> 
     </div> 
    ); 

    const sidebarList = (
     <div> 
     <List className={classes.list}> 
      {sidebarListItems} 
     </List> 
     </div> 
    ); 

    return (
     <div> 
     <Drawer 
      open={this.props.open} 
      onRequestClose={this.props.onRequestClose} 
      onClick={this.props.onRequestClose()} 
      type="permanent"> 
      {sidebarList} 
     </Drawer> 
     </div> 
    ); 
    } 
} 

export default withStyles(rootStyles)(UndockedDrawer); 

到目前为止,我已努力使top财产高达AppBar的高度,但没有我需要的这种行为是什么。

有什么办法可以达到这个目的吗?

回答

0

您需要为AppBar提供正确的样式。以例子从the docs you provided

相反的:

const styles = theme => ({ 
    ... 
    appBar: { 
    position: 'absolute', 
    width: `calc(100% - ${drawerWidth}px)`, 
    marginLeft: drawerWidth, 
    }, 
    ... 
}); 

用途:

const styles = theme => ({ 
    ... 
    appBar: { 
    position: 'absolute', 
    width: '100%', 
    zIndex: '1400', 
    }, 
    ... 
}); 

为什么zIndex是1400?这只是一个高于抽屉的zIndex的任意数字,它是1300

enter image description here