Angular Material 基本对齐、大小、浮动实用程序 class

Question

当它超出 material 组件 material.angular.io 时，假设我只想在 <div> 中执行简单的 text-align: right 或 float:right。我该怎么做？

我看过

align="end"

在某些 material 正在使用的小部件中。但它不适用于所有小部件。

还有

matLine

使元素成为列表中整行的指令

我记得看过

matSize="large"

或某处类似的东西。

但是我在官方文档中找不到与此相关的任何内容。对我来说，这很简单。

例如bootstrap 3中有

 <div class="text-right">
 <div class="pull-right">

帮手类。 Bootstrap 4 甚至有更细粒度的类用于调整填充和边距 m-2 p-2 等

还可以为更小、更大的元素（按钮、输入等）调整大小

<button class="btn btn-primary btn-lg">

在 Angular Material 中是否有解决此问题的解决方案？

或者真的是小部件。你只需要自己解决这些细节。

Answer 1

我认为Angular Flex-Layout就是为此而生的。您的示例可以这样创建：

<div fxLayout="row" fxLayoutAlign="flex-end"></div>

虽然该项目仍处于测试阶段（很长一段时间以来），但我不太确定它的维护有多积极。

按钮大小在 material 规范中不可用，因此您必须自己实施。

Angular Material basic alignment, size, float utility class