是否可以使 md-button 更小？

Question

我希望显示左右箭头和 NOW 文本的按钮尽可能小。我该怎么做？

<div ng-controller="DateCtrl" layout="row" flex>
     <md-datepicker ng-model="activeDate" md-placeholder="Enter date" ng-change="changeDate()"></md-datepicker>
     <div>
         <md-button class="md-raised" ng-click="prev()">&lt;</md-button>
         <md-button class="md-raised" ng-click="changeToday()">NOW</md-button>
         <md-button class="md-raised" ng-click="next()">&gt;</md-button>
     </div>
</div>

使用当前的解决方案，按钮将被排列成 layout="column"，即垂直排列。

在我深入研究这种 CSS 风格之前，我只是想检查一下是否有首选的 Angular-Material 方式来做到这一点？

Answer 1

将以下内容添加到您的样式中：

.md-button {
    min-width: 1%;
}

或者，使用自定义 class:

.md-button.md-small {
    min-width: 1%;
}

或者，在 Angular Material 2:

.mat-button.mat-small {
    min-width: 1%;
}

Answer 2

在您的风格中尝试以下class。您可以根据按钮的 big/small 调整像素。

.md-button.md-small {
     width: 20px;
     height: 20px;
     line-height: 20px;
     min-height: 20px;
     vertical-align: top;
     font-size: 10px;
     padding: 0 0;
     margin: 0;
}

Answer 3

我用这种风格制作了一个更小的 md-button

button {
    min-height: 23px !important;
    min-width: 46px !important;
    font-size: 10px !important;
    line-height: 0px; 
}

Answer 4

我正在使用 https://github.com/angular/material2

这会创建更小的迷你晶圆厂。

.del {
  width: 30px;
  height: 30px;
}

.del .mat-icon {
    padding: 4px 0;
    line-height: 22px;
}

<button md-mini-fab (click)="onDeleteValue(valIndex)"
        type="button"
        color="warn"
        class="del">
    <md-icon>close</md-icon>
</button>

Answer 5

我发现 font-size 必须在 md-icon 上，我需要在 md-button 和 md-icon 标签上设置最小高度。

<md-button
    class="md-exclude
    md-icon-button
    md-primary"
    style="margin-right:0;
    padding:0; height:20px;
    min-height:1px;"
    ng-click="openfn($event, newnote)"
    aria-label="note">
    <md-icon
        class="material-icons"
        style="font-size:20px;
        min-height:1px;">
        info_outline
    </md-icon>
    <md-tooltip md-direction="top">
        {[{ ::tooltiplabel }]}
    </md-tooltip>
</md-button>

Answer 6

如果您使用的是 md-icon-button，则 material 设置图标的宽度、高度和填充：

.md-button.md-icon-button {
   margin: 0 6px;
   height: 40px;
   min-width: 0;
   line-height: 24px;
   padding: 8px;
   width: 40px;
   border-radius: 50%;
}

因此您需要覆盖它（“auto” 如果您希望按钮适合父按钮则效果很好）

.md-button.md-small {
    padding: 0px;
    margin: 0px;
    height: auto;
    width: auto;
    min-height: 20px;
}

Answer 7

Tiago 的回答对我有用。

如果您使用垫子按钮的变体，例如凸起按钮 -

.mat-raised-button {
    min-width: 150px;
}

Answer 8

您可以使用 css transform: scale()。您必须稍微玩一下边距，但代码不多，您可以很容易地变小或变大。

.shrink-2x {
     transform: scale(0.5);
}

.enlarge-2x {
     transform: scale(1.5);
}

Example

Answer 9

这里的许多答案都使用了多余的 CSS 属性。这就是您所需要的：

.my-mat-button {
  line-height: 1;
  min-width: 0;
  padding: 7px 15px 5px; // adjust as needed
}

您可能还想（或不想）调整 font-size 和 border-radius 但这不言而喻。

Answer 10

只需将 .mat-small（对于 Angular Material 2+）添加到按钮的类，无需自定义样式。

对于Angular Material

<button
  mat-button
  class="mat-small"
</button>

是否可以使 md-button 更小？

Is it possible to make an md-button smaller?

css

angularjs

material-design

angular-material