Question

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

<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%;
}

或者，使用自定义类：

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

或者，在Angular Material 2中：

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

Answer 2

在您的样式中尝试以下类。您可以根据按钮的大小来调整像素。

.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 {
      min-height: 23px !important;
      min-width: 46px !important;
      font-size: 10px !important;
      line-height: 0px; 
}

Answer 4

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

这会创造更小的迷你工厂。

＆＃13;

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

＆＃13;

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

＆＃13;

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

您可以使用CSS transform: scale()。您必须稍微留一点余地，但是代码并不多，您可以轻松地变大或变小。

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

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

Example

Answer 7

如果您使用的是md-icon-button，那么材质将为图标设置宽度，高度和填充：

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

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

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

Answer 8

Tiago的回答对我有用。

如果您使用的是Mat按钮的变体，例如凸起的按钮-

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

是否可以使md按钮变小？

8 个答案: