使用 Angular Material，是否可以在同一行中将一个按钮左对齐，另一个按钮右对齐？

Question

根据Angular Material's documentation on alignment：

The layout-align attribute takes two words. The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpendicular to the layout's direction.

我用它来创建您可以在下图中看到的按钮部分：

使用以下代码：

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
  <md-button class="md-primary">Submit</md-button>
  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

但是，我希望 Submit 按钮左对齐，所有其他按钮右对齐。使用 Angular Material 是否有正确的方法，还是我只需要创建自己的样式？

Answer 1

你可以在 div 和 layout-align 的帮助下做到这一点，这里是代码：

<section layout="row" layout-sm="column" layout-align="end center" layout-wrap>
  <div layout="row" layout-align="start center" flex>
    <md-button class="md-primary">Submit</md-button>
    <span flex></span>
  </div>
  <md-button class="md-warn">Cancel</md-button>
  <md-button class="md-warn">Delete Boundary Partner Type</md-button>
</section>

和工作 Plunker。

Answer 2

您也可以使用

layout-align="space-between center"

看这个例子：https://material.angularjs.org/latest/demo/panel （最后一个例子）

Answer 3

"space-between center" 适用于 Angular V5 和 angular/flex-layout。您必须将其用作：fxLayoutAlign = "space-between center".

Answer 4

这适用于最新的 Angular。

如果要将多个按钮左对齐或右对齐，只需将按钮分组为 div。

例如，当您将 Prev 和 Next 按钮放在左侧，将关闭按钮放在右侧时，

<section fxLayout fxLayoutAlign="space-between center">
   <div>
      <button mat-button>Prev</button>
      <button mat-button>Nex</button>
    </div>
    <button mat-button cdkFocusInitial mat-dialog-close>Close</button>
</section>

Answer 5

Toolbar 的文档显示了一个简单的解决方案：

<mat-toolbar>
  <button mat-icon-button><mat-icon>menu</mat-icon></button>     <-- left
  <span class="example-spacer"></                  <-- space in the middle
  <button mat-icon-button><mat-icon>favorite</mat-icon></button> <-- right
  <button mat-icon-button><mat-icon>share</mat-icon></button>    <-- right
</mat-toolbar>

这会将“汉堡菜单”图标放在左侧，将心脏（“收藏夹”）和共享图标放在右侧。关键是这位小美女：

 <span class="example-spacer"></span>

用这个 CSS:

.example-spacer {
  flex: 1 1 auto;
}

第一个参数是最大量space，第二个是最小量，第三个是理想量。 auto 表示“填满 space”。

flex: 0 1 auto 和 flex: none 为零 space，即红心和分享图标向右。

你甚至可以在左边一个，中间一个，右边一个：

<mat-toolbar>
  <button mat-icon-button><mat-icon>menu</mat-icon></button>     <-- left
  <span class="example-spacer"></span>                           <-- space
  <button mat-icon-button><mat-icon>favorite</mat-icon></button> <-- middle
  <span class="example-spacer"></span>                          <-- space
  <button mat-icon-button><mat-icon>share</mat-icon></button>    <-- right
</mat-toolbar>

使用 Angular Material，是否可以在同一行中将一个按钮左对齐，另一个按钮右对齐？

Using Angular Material, is it possible to align one button to the left and another to the right, in the same row?

css

angularjs

angular-material