Question

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

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

现在，假设我想在列之间设置任意数量的空间（比如10px的“gutter”）。我可以创建第三个空div，设置一个小的“flex”值并将“flex”值从50修改为更小的值，但这似乎是一个hack并且会创建一个基于百分比的装订线宽度。似乎应该有一个更清洁的方法来获得一个精确的排水沟而不创建空div。我是否必须在我的列div上放置类并设置CSS边距值（并处理左对比等）？任何人都有任何指向Angular Material方式吗？

Answer 1

我不确定它是否是＆＃34; Angular Material＆＃34;做事的方式。但我感到痛苦。

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

这就是我所做的。

由于Angular Material的layout指令仅影响直接的孩子，我相信这是一种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; } } }

通知 - 我不确定如何将>置于其中，因此将其替换为＆＃34;（大于）＆＃34;

<强>解释
$layout-gutter-width实际上是由angular-material.scss定义的，它带有Angular Material（我在我的项目中使用SASS），但您可以将其设置为您想要的任何内容，CSS或SASS，10px，16px，50px等等。

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

> *这里的意思是＆＃34; ......＆＃34;
的任何直系后代 ~ *这里的意思是＆＃34;任何直接的兄弟......＆＃34;
&:last-of-type这里的意思是＆＃34;这些直接后代的最后一个......＆＃34;

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

您可以使用＆＃39; layout-margin＆＃39; 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

我相信，至少在当今，样品的“材料方式”是这样的：

fit_text

Answer 4

你可以在选项之间使用layout-align和空格。

角度材质：如何指定布局中两列之间的间距？

4 个答案: