时间戳

首页 > 解决方案 > 如何将 AppBar 内的链接右对齐到 Material UI 的选项卡旁边？

reactjs - 如何将 AppBar 内的链接右对齐到 Material UI 的选项卡旁边？

问题描述

对于 Material UI 和 ReactJS 来说还是比较新的。

但我试图在页面顶部设置一组选项卡，但我还想要一个指向选项卡右侧的注销链接。

这就是我所拥有的

<AppBar position="static">
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
          style={{flex:1}}
        >
          <Tab label="Approvals"  />
          <Tab label="Members" />
        </Tabs>
        <a href="http://www.logout.com">Logout</a>
      </AppBar>

但是注销链接没有向右对齐，而是在选项卡下方的新行上。

我将如何将它放在标签的末尾？

标签： reactjsmaterial-ui

解决方案

我认为它可以帮助你。添加之间和注销按钮。

<AppBar position="static">
     <Toolbar>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="simple tabs example"
          >
          <Tab label="Approvals"  />
          <Tab label="Members" />
        </Tabs>
        <Box flexGrow={1} />
        <Button>Logout</Button>
      </Toolbar>
 </AppBar>

推荐阅读