使用带有material-ui-next的material-ui appbar向右或向左浮动的正确方法是什么? [英] What's the right way to float right or left using the material-ui appbar with material-ui-next?

问题描述

在使用 material-ui-next ("material-ui": "^1.0.0-beta.22",)

他们似乎从 api 中删除了 iconElementRight=.我们现在必须在应用栏中使用 <Grid> 吗?感觉有点笨拙.在应用栏中浮动按钮(例如登录)的正确方法是什么?

<AppBar position="static"><工具栏><网格容器间距={24}><网格项 xs={11}><排版类型=标题"颜色=继承">标题</排版></网格><网格项 xs={1}>
<心形图标/><按钮凸起颜色=重音">登录</按钮></div></网格></网格></工具栏></AppBar>

解决方案

@Kyle 你说得对:)

只需添加到网格容器中:

<块引用>

justify="space-between"

用你的例子:

<AppBar position="static"><工具栏><网格justify="space-between"//在这里添加 :)容器间距={24}><网格项目><排版类型=标题"颜色=继承">标题</排版></网格><网格项目>
<心形图标/><按钮凸起颜色=重音">登录</按钮></div></网格></网格></工具栏></AppBar>

I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",)

It seems they removed iconElementRight= from the api. Do we have to use the <Grid> now in the appbar? It feels kinds of cludgy. What's the right way to float buttons (e.g. login) in the appbar?

<AppBar position="static">
      <Toolbar>
        <Grid container spacing={24}>
          <Grid item xs={11}>
            <Typography type="title" color="inherit">
              Title
            </Typography>
          </Grid>

          <Grid item xs={1}>
            <div>
              <HeartIcon />
              <Button raised color="accent">
                Login
              </Button>
            </div>
          </Grid>
        </Grid>
      </Toolbar>
    </AppBar>

解决方案

@Kyle You had it right :)

just add to the grid container:

justify="space-between"

With your example:

<AppBar position="static">
  <Toolbar>
    <Grid
      justify="space-between" // Add it here :)
      container 
      spacing={24}
    >
      <Grid item>
        <Typography type="title" color="inherit">
          Title
        </Typography>
      </Grid>

      <Grid item>
        <div>
          <HeartIcon />
          <Button raised color="accent">
            Login
          </Button>
        </div>
      </Grid>
    </Grid>
  </Toolbar>
</AppBar>

这篇关于使用带有material-ui-next的material-ui appbar向右或向左浮动的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！