Material UI: 使用网格时如何从侧边栏切换到底部导航

Question

我希望我的边栏在移动视图中成为底部导航。我如何根据屏幕的大小切换这些组件。我想知道有没有办法使用 material ui 网格缩放（“lg、xs 等”）？

    <Grid container sx={{backgroundColor: '#02141C;'}}>
        <Grid item xs={2}>
            <Sidebar />
        </Grid>
        <Grid item lg={10}>
            <ArticleGrid />
        </Grid>           
    </Grid>

Answer 1

将 sx={{ display: { xs: "none", sm: "flex" } }} 添加到边栏
将 sx={{ display: { sm: "none" } }} 添加到 BottomNavigation

代码：

import * as React from "react";
import Box from "@mui/material/Box";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import RestoreIcon from "@mui/icons-material/Restore";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";

export default function SimpleBottomNavigation() {
  const [value, setValue] = React.useState(0);

  const SideBar = () => {
    return (
      <AppBar position="static" sx={{ display: { xs: "none", sm: "flex" } }}>
        <Toolbar variant="dense">
          <IconButton
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit" component="div">
            Side Bar
          </Typography>
        </Toolbar>
      </AppBar>
    );
  };

  const BottomNav = () => {
    return (
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        sx={{ display: { sm: "none" } }}
      >
        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
      </BottomNavigation>
    );
  };

  return (
    <Box sx={{ maxWidth: 'xl' }}>
      <SideBar />
      <BottomNav />
    </Box>
  );
}

玩转代码 here

Material UI: 使用网格时如何从侧边栏切换到底部导航

Material UI: how to switch from sidebar to bottom navigation when using grid

responsive-design

reactjs

material-ui