Angular Material: 如何指定布局中两列之间的间距？

Question

假设我在 Angular Material 布局中的一行中有两列：

<div layout="row" flex>
  <div layout="column" flex="50">
    Content 1...
  </div>
  <div layout="column" flex="50">
    Content 2...
  </div>
</div>

现在，假设我想在列之间设置任意数量的 space（例如 "gutter"，10 像素）。我可以创建第三个空的 div，设置一个小的 "flex" 值并将 "flex" 值从 50 修改为更小的值，但这看起来像是 hack 并且会创建基于百分比的装订线宽度。似乎应该有一种更简洁的方法来获得精确的装订线而不创建空的 divs。我是否必须将类放在我的列 div 上并设置 CSS 边距值（并处理左与右等）？任何人有任何指示以 Angular Material 方式执行此操作吗？

Answer 1

我不确定这是否是 "Angular Material" 做事的方式。但是我感觉到你的痛苦。

目前，我正在将一些 Bootstrap 代码迁移到 Angular Material 并且确实需要一种方法。

这是我所做的。

由于 Angular Material 的 layout 指令仅影响直系子级，我相信这是一种 Angular Material 操作方式。因此，在 layout div 上，我添加了一个 class、gutter，这里是 SASS（更漂亮的 CSS，带有变量）伴随着 class:

.gutter {
    (greater-than) * {
        padding-right: $layout-gutter-width;
        ~ * {
            padding-left: $layout-gutter-width;
        }
        &:last-of-type {
            padding-right: 0;
        }
    }
}

注意 - 我不确定如何将 > 放在里面，所以用它代替“（大于）”

说明
$layout-gutter-width 实际上是由 Angular Material 附带的 angular-material.scss 定义的（我在我的项目中使用 SASS）但是你可以随意设置它，CSS或 SASS、10px、16px、50px 等等。

对于那些不完全熟悉SASS中发生的事情的人：

> *这里的意思是"Any immediate descendant of..."
~ *这里表示"Any immediate sibling of..."
&:last-of-type这里表示"The very last of these immediate descendants..."

因此，对于 class gutter 元素的每个直接后代，我们添加 padding-right。对于每个后续的兄弟元素，我们添加 padding-left，对于最后一个元素，我们删除 padding-right。第一个元素不会有 padding-left，最后一个元素不会有 padding-right.

最终这得到了我们想要的填充。

<div layout="row" class="gutter" layout-align="center center">
    <div flex="50">
        ...
    </div>
    <div flex="50">
        ...
    </div>
</div>

Answer 2

你可以用 'layout-margin' 做很多事情 https://material.angularjs.org/latest/layout/options 示例：

<div layout="row" layout-margin>
  <div flex>Parent layout and this element have margins.</div>
</div>
<div layout="row" layout-padding>
  <div flex>Parent layout and this element have padding.</div>
</div>
<div layout="row" layout-fill style="min-height: 224px;">
  <div flex>Parent layout is set to fill available space.</div>
</div>
<div layout="row" layout-padding layout-margin layout-fill style="min-height: 224px;">
  <div flex>I am using all three at once.</div>
</div>

Answer 3

您可以使用 layout-align with spaces between 选项。

Answer 4

我相信你的样本 'Material way' 至少在现在 space 之间是这样的：

<div fxLayout="row" flex fxLayoutGap="10px">
  <div fxLayout="column" flex="50">
    Content 1...
  </div>
  <div fxLayout="column" flex="50">
    Content 2...
  </div>
</div>

Angular Material: 如何指定布局中两列之间的间距？

Angular Material: How do you specify spacing between two columns in a layout?

angular-material