angularjs - md-按钮尺寸(有 Angular Material )

Question

我对 Angular-Material 非常陌生，我正在使用一些 md-button 指令。由于我来自 Bootstrap 世界，我正在寻找一种为 md-button 提供不同大小的方法。类似于 Bootstrap 中的 btn-xs 和 btn-sm 类。

我创建了一个类md-button-xs并尝试使用该类设置按钮的大小，但没有成功。我什至尝试使用 Google Chrome 中的开发者选项来调整按钮大小，但这也不起作用。

如何为 md-button 和其他 Angular Material 组件设置不同的尺寸？

Answer 1

我们都是 Angular Material 的新手。这是我对我的回答的免责声明。

我从未在 twitter bootstrap 上花费太多时间，但我可以告诉你，在 Angular Material 领域中指定尺寸可能并不那么重要。

• Angular Material 利用 Flexbox 。我个人发现，在 Angular Material 中指定具体尺寸不太重要。 Demo: Layout > Grid System
• 虽然您可以使用 ngMaterial 中的网格完成很多工作(例如: grid lists 和 child alignment )，但我建议看看是否简单 layout attribute “开箱即用”，配合 Flexbox 的一般使用。

为什么不乱搞按钮演示页面中的按钮呢？或者您是否有更具体的事情需要帮助？ https://material.angularjs.org/latest/#/demo/material.components.button

我为你搞砸了一点!一旦你开始，事情就很简单了。 http://codepen.io/qvazzler/pen/jPgbQO

<md-button flex="15">{{title1}} (Not much)</md-button>
<md-button flex="15" md-no-ink="" class="md-primary">Primary (Not much either)</md-button>
<md-button flex="33" ng-disabled="true" class="md-primary">Disabled (More space for me!)</md-button>
<md-button flex class="md-warn">{{title4}} (I'll have what's left)</md-button>

祝你好运!

引用 Angular Material version 0.10.1 撰写的帖子。如果您使用的是较新的版本并且无法获得熟悉的结果，请在浏览我的任何链接后使用该网站更改版本以找出问题所在。而且总是有changelog .