Question

使用React Material UI库（material-ui.com），如何将AppBar放置在屏幕的左侧？我需要构建的设计在左侧具有固定位置的全局导航（通常在顶部看到）。导航中还有一些链接，这些链接会将面板从左侧（从全局导航的“后面”）滑出。

我在支持该设计的文档中找不到任何内容。有可能吗？

谢谢

Answer 1

我能够使用flexDirection="row"在flex容器中的AppBar来完成此操作。

 <React.Fragment>
      <CssBaseline />
      <Box display="flex" flexDirection="row" className={classes.root}>
        <Box flexGrow={0}>
          <AppBar elevation={0} position="sticky">
            <div>Left</div>
            <div>appBar</div>
            <Button>try me</Button>
            <Divider />
            <Button>try me2</Button>
          </AppBar>
        </Box>
        <Box display="flex" flexDirection="row" flexGrow={1}>
          <Box
            display="flex"
            flexDirection="column"
            className={classes.mainArea}
            flexGrow={1}
          ></Box>
        </Box>
        <Box flexGrow={0}>
          <AppBar elevation={0} position="sticky">
            <div>Right</div>
            <div>appBar</div>
            <Button>try me</Button>
            <Divider />
            <Button>try me2</Button>
          </AppBar>
        </Box>
      </Box>
    </React.Fragment>

Code SandBox Demo

MUI：如何在左侧放置AppBar

1 个答案: