Material-UI 下拉菜单导航

Question

我正在使用 Material-ui v1 beta，我希望在顶部有一系列下拉菜单用于导航。这主要是一个 Web 应用程序 - 我看到 AppBar 组件带有一个菜单项但没有下拉菜单，我看到 Simple Menu 是一个可以工作的下拉菜单，但它说不将其用于主导航。

我想知道为什么不呢？

导航的最佳做法是什么？

对于屏幕顶部下拉导航系统的任何建议 - 最好与 react-router 绑定？

Answer 1

我使用了drawer component 而不是menu component。 Drawer component 非常灵活，如果您需要支持响应式设计，它可以很好地工作。已有a responsive drawer 可用于此目的。此外，material-ui website 使用抽屉作为最左侧的菜单，因此您可以通过更改浏览器窗口的大小来了解它的工作原理。

这是我如何使用抽屉组件的示例：

import React from 'react';
import { MenuItem } from 'material-ui/Menu';
import Drawer from 'material-ui/Drawer';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import List from 'material-ui/List';
import ListItemText from 'material-ui/List/ListItemText';
import Hidden from 'material-ui/Hidden';
import LinkButton from '../LinkButton/LinkButton'
import CustomIconButton from '../CustomAppBar/CustomIconButton/CustomIconButton';
import FontAwesome from 'react-fontawesome';
import {Routes, ReportTypes} from '../../constants';

import { withStyles } from 'material-ui/styles';

const drawerWidth = 250;


const styles = theme => ({
    navIconHide: {
        display: 'block',
        [theme.breakpoints.up('xl')]: {
            display: 'none'
        }
    },

    drawerPaper: {
        width: drawerWidth,
        left: 0,
        [theme.breakpoints.up('lg')]: {
            width: drawerWidth
        }
    }
});

const menuItemLinks = [
    {
        text: "All reports",
        path: "/"
    }, {
        text: ReportTypes.STATIC_ANALYSIS,
        path: Routes.STATIC_ANALYSIS_DETAILS
    }, {
        text: ReportTypes.SLOC,
        path: Routes.SLOC_DETAILS
    }, {
        text: ReportTypes.UNIT_TEST_RESULTS,
        path: Routes.UNIT_TEST_DETAILS
    }, {
        text: ReportTypes.UNIT_TEST_COVERAGE,
        path: Routes.UNIT_TEST_COVERAGE
    }
]


class AppBarMenu extends React.Component {

    state = {
        open: false
    }

    handleRequestClose = event => {
        this.setState({ open: false });
    }

    handleDrawerToggle = () => {
        this.setState({ open: !this.state.open });
    }

    getMenuItem(menuPath, text, key) {
        const {path} = this.props

        return <MenuItem
            onClick={this.handleRequestClose}
            selected={menuPath === path}
            key={key}
            to={menuPath}
            component={LinkButton}>
            <ListItemText primary={text}> </ListItemText>
            {menuPath === path ? <FontAwesome name="angle-right"/> : ''}
        </MenuItem>
    }

    getMenuItems() {
        return menuItemLinks.map((menuItem, key) => this.getMenuItem(menuItem.path, menuItem.text, key))
    }

    render() {
        return this.getDrawer()
    }

    getDrawer() {

        const { classes } = this.props;

        const drawer = (
            <div>
                <Toolbar className={classes.drawerHeader} >
                    <Typography variant="title" color="inherit">Reports</Typography>
                </Toolbar>
                <List>{this.getMenuItems()}</List>
            </div>
        )

        return (
            <div>
                <CustomIconButton
                    iconName='bars'
                    aria-label="open drawer"
                    onClick={this.handleDrawerToggle}
                    className={classes.navIconHide}>
                    <Hidden xlUp>
                        <Drawer
                            variant="temporary"
                            anchor='left'
                            open={this.state.open}
                            classes={{
                                paper: classes.drawerPaper
                            }}
                            onClose={this.handleDrawerToggle}
                            ModalProps={{
                                keepMounted: true
                            }}>
                            {drawer}
                        </Drawer>
                    </Hidden>
                </CustomIconButton>
                <Hidden lgDown>
                    <Drawer
                        variant="permanent"
                        open
                        classes={{
                            paper: classes.drawerPaper
                        }}>
                        {drawer}
                    </Drawer>
                </Hidden>
            </div>
        )
    }
}
export default withStyles(styles)(AppBarMenu);