md-按钮大小（角材料）答案

【问题标题】：md-button size (angular material)md-按钮大小（角材料）
【发布时间】：2015-08-21 21:12:24
【问题描述】：

我对 angular-material 非常陌生，我正在使用一些 md-button 指令。当我来自 Bootstrap 世界时，我正在寻找一种为md-buttons 设置不同大小的方法。 Bootstrap 中的 btn-xs 和 btn-sm 类。

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

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

【问题讨论】：

整个问题最困扰我的是没有标准的“更大按钮”的概念。添加自己的类、更改行高、flex/width 和 font-size 很容易，但不应该是关于标准化界面的材料。小/标准按钮并不总是很好用。

标签： angularjs material-design angular-material

【解决方案1】：

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

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

Angular 材质使用Flexbox。我个人发现，在 Angular Material 中指定特定尺寸不太重要。 Demo: Layout > Grid System
虽然您可以使用 ngMaterial 中的网格完成很多工作（例如：grid lists 和 child alignment），但我建议您查看简单的 layout attribute 是否适合您“开箱即用”，以配合一般用法弹性盒。

为什么不搞乱按钮演示页面中的按钮呢？或者您是否有更具体的事情需要帮助？ 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。

【讨论】：

感谢您花时间回答我的问题。我已经扔掉了你提到的所有链接，但没有成功。我的最终决定是（暂时）不将 Angular Material 用于 Web 应用程序，也许我将它用于一些移动混合应用程序。
@Najafsen，你在寻找什么成功？在我看来，您仍然想设置特定的 x 和 y 大小，这是一个非常好的答案，其中 Angular Material 不是最好的方法。另外，如果您已完成此主题，请将我的回答标记为已接受。
@WilliamS 的答案只有在他们解决了 OP 问题中的具体问题时才应该被接受，而不是因为有人已经完成了某个主题
@pootzko，那么我该如何解决具体问题呢？他已经脱离了整个“框架”。
我猜你不能解决所有问题.. :) 阅读：meta.stackexchange.com/questions/5234/…

【解决方案2】：

如果你愿意，你可以自己做，例如我就是这样做的：

    .material-cust-large-button {
    width: 300px;
    height: 70px;
    padding-top: 13px;
}
.material-cust-medium-button {
    width: 150px;
    height: 70px;
    padding-top: 13px;
}

在 html 中：

<md-button class="md-raised md-primary material-cust-large-button">text</md-button>
<md-button ui-sref="..." class="md-raised md-primary material-cust-medium-button">text</md-button>

它按我的预期工作：

【讨论】：

【解决方案3】：

这对我来说有点棘手。问题是最小宽度由 Angular Material 设置为 88px。我希望我的非常小。我正在设置宽度和最大宽度，但没想到检查最小宽度。对于一个全局的、常见的东西，比如一个按钮，最小宽度设置得相当高......所以设置最小宽度，否则如果你想让它变小，你会遇到调整它的问题。

【讨论】：

【解决方案4】：

如果您将尺寸设置为使用 !important 标记覆盖 styles.css 文件中的默认尺寸，它们将发生变化。这是我可以设置它们的唯一方法。我必须澄清这是针对 Angular 而不是 AngularJS，但是，我想主 CSS 文件在 AngularJS 中也有同样的好处

    .mat-radio-outer-circle {
  width: 15px !important;
  height: 15px !important;
}

.mat-radio-inner-circle {
  width: 15px !important;
  height: 15px !important;
}

【讨论】：