Question

我对角质材料非常新，我使用了一些md-button指令。当我来自Bootstrap世界时，我正在寻找一种方法来为md-button s设置不同的大小。类似于Bootstrap中的btn-xs和btn-sm类。

我创建了一个类md-button-xs并尝试使用此类设置按钮的大小但没有成功。我甚至尝试使用谷歌浏览器中的开发者选项来调整按钮的大小，但这也没有用。

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

Answer 1

我们是Angular Material的新手（很好）。这是我对我的回答的免责声明。

我从未在Twitter引导程序上花费太多时间，但我可以告诉你，在Angular Material领域中指定大小可能并不那么重要。

Angular Material使用Flexbox。我个人发现，在Angular Material中指定特定尺寸不太重要。 Demo: Layout > Grid System
虽然您可以使用ngMaterial中的网格完成很多工作（例如：grid lists和child alignment），但我建议您查看简单的layout attribute是否适用于您？＃34;框＆＃34;，以配合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。

Answer 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>

它按预期工作：

Answer 3

这对我来说有点棘手。问题是最小宽度由Angular Material设置为88px。我希望我的非常小。我设置宽度和最大宽度，但没想过检查最小宽度。对于像按钮这样的全局常见内容，最小宽度设置得相当高......所以设置最小宽度，或者如果你想让它变小，你就会遇到调整大小的问题。

Answer 4

如果您将尺寸设置为覆盖styles.css文件中带有！important标签的默认尺寸，它们将会更改。这是我设置它们的唯一方法。我必须澄清这是针对Angular而不是AngularJS，但是，我认为主要的CSS文件在AngularJS中具有相同的好处

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

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

md按钮尺寸（棱角材料）

4 个答案: