材料-UI下拉菜单导航

Question

我正在使用材料-UI v1 beta，我想在顶部进行一系列下拉菜单以进行导航。这主要是一个Web应用程序 - 我看到了带有菜单项的Appbar组件，但没有下拉菜单，我看到了一个简单的菜单，该菜单是可行的，但它说不将其用于主要导航。

我想知道为什么不呢？

导航的最佳实践是什么？

关于屏幕下拉导航系统顶部的任何建议 - 最好与React -Router绑定？

Answer 1

我使用抽屉组件而不是菜单组件。 Drawer component非常灵活，如果您需要支持响应式设计，则效果很好。为此目的已经有一个响应式抽屉。另外，材料-UI网站使用抽屉作为其最左边的菜单，因此您可以通过更改浏览器窗口的大小来查看其工作方式。

这是我使用抽屉组件的一个示例：

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