Question

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

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>
        );
    }
};

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

1 个答案: