angular-material - 角度 Material : How do you specify spacing between two columns in a layout?

Question

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

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

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

Answer 1

我不确定这是否是“角度 Material ”的处理方式。但我能感受到你的痛苦。

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

这是我所做的。

由于 Angular Material 的 layout 指令只影响直接的 child ，我相信这是一种 Angular Material 的操作方式。因此，在 layout div 上，我添加了一个类 gutter，这是该类附带的 SASS(只是更漂亮的 CSS，带有变量):

.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 中发生的事情的人:

> * 这里的意思是“...的任何直系后代”
~ * 这里的意思是“...的任何直系兄弟”
&:last-of-type 这里的意思是“这些直系后代中的最后一个……”

因此，对于类为 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>