如何使用 Material-UI 在 Google Inbox 中制作抽屉

Question

我正在使用 Meteor、React 和 Material-UI 构建一个应用程序。我有一个基于抽屉的自定义左侧导航组件。

class LeftNav extends Component {

    constructor(props){
        super(props);
    }

    render() {

        return (
            <Drawer open={this.props.open}
                            docked={false}
                            onRequestChange={this.props.handleOnRequestChange}
            >
                <Card >
                    <CardMedia overlay={<div><Avatar src='avatar.png' size={50}  style={styles.avatar} /> <CardTitle title="Phil Cruz" subtitle="phil@philcruz.com" titleColor={darkWhite} subtitleColor={lightWhite}/></div>} >
                        <img src="/left_nav_wallpaper.jpg" />
                    </CardMedia>
                </Card>
                <MenuItem primaryText="testdomain1.com" leftIcon={<ActionGrade />}  />
                <MenuItem primaryText="testdomain2.com" leftIcon={<ActionHttp />}/>
                <MenuItem primaryText="Add site..." leftIcon={<ContentAdd />} />
                <Divider />
                <MenuItem primaryText="Settings" leftIcon={<Settings />} />
                <MenuItem primaryText="Help & About" leftIcon={<HelpOutline />} />
        </Drawer>
        );
    }
};

我想让它的行为类似于 Google InBox 左侧导航/抽屉。它有 3 个部分：带有封面图像和头像的顶部、中间部分和底部。

我想要相同的行为：

• 底部菜单项固定在底部（下图为红色 图片）
• 顶部可以滚动

我该怎么做？

Answer 1

通过阅读这些问题/答案：

How to create a sticky footer inside the LeftNav?

Get viewport/window height in ReactJS

Reactjs - Rerender on browser resize

我想出了一个解决方案。基本上，您需要将内容放在 2 个 div 中。在底部 div 中使用绝对定位使其固定在底部。然后，您需要根据窗口高度减去页脚 div 的高度来计算顶部 div 的高度。监听调整窗口大小事件，以便您可以在调整浏览器大小时手动更新 div 高度。

代码如下：

class LeftNav extends Component {

    constructor(props){
        super(props);
        this.state = { };
        this.updateDimensions = this.updateDimensions.bind(this);
    }

    componentDidMount(){
            this.updateDimensions();
            window.addEventListener("resize", this.updateDimensions);
    }

    updateDimensions() {
        this.setState({
            height: window.innerHeight,
            footerHeight: document.getElementById('leftNavFooter').clientHeight
         });
    }

    render() {

        return (
            <Drawer open={this.props.open}
                            docked={false}
                            onRequestChange={this.props.handleOnRequestChange}
            >
            <div style={{overflowY: 'auto', overflowX: 'hidden', height: (this.state.height - this.state.footerHeight) + 'px'}}>
                <Card >
                    <CardMedia overlay={<div><Avatar src='avatar.png' size={50}  style={{ marginLeft: 16 }} /> <CardTitle title="Phil Cruz" subtitle="phil@philcruz.com" titleColor={darkWhite} subtitleColor={lightWhite}/></div>} >
                        <img src="/left_nav_wallpaper.jpg" />
                    </CardMedia>
                </Card>
                <Menu>
                    <MenuItem primaryText="testdomain1.com" leftIcon={<ActionGrade />}  />
                    <MenuItem primaryText="testdomain2.com" leftIcon={<ActionHttp />}/>
                    <MenuItem primaryText="Add site..." leftIcon={<ContentAdd />} />
                </Menu>
            </div>
            <div id="leftNavFooter" style={{position: 'absolute', bottom: 0, width: '100%', overflow: 'hidden'}}>
                <Divider />
                <Menu>
                    <MenuItem primaryText="Settings" leftIcon={<Settings />} />
                    <MenuItem primaryText="Help & About" leftIcon={<HelpOutline />}  />
                </Menu>
            </div>
            </Drawer>
        );
    }
};