CSS 是否可以使 md 按钮更小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33148095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to make an md-button smaller?
提问by Andreas Selenwall
I want my buttons showing left- and right arrow and NOW text to be as small as possible. How do I do that?
我希望显示左右箭头和 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()"><</md-button>
<md-button class="md-raised" ng-click="changeToday()">NOW</md-button>
<md-button class="md-raised" ng-click="next()">></md-button>
</div>
</div>
With the current solution the buttons will be arranged as if they were in a layout="column", that is vertically.
在当前的解决方案中，按钮将被排列成一个layout="column"，即垂直的。
Before I dig into this CSS-style, I just wanted to check if there is a preferred Angular-Material way of doing this?
在我深入研究这种 CSS 样式之前，我只是想检查一下是否有一种首选的 Angular-Material 方式来做到这一点？
回答by Tiago
Add the following to your styles:
将以下内容添加到您的样式中：
.md-button {
min-width: 1%;
}
Alternatively, use a custom class:
或者，使用自定义类：
.md-button.md-small {
min-width: 1%;
}
Or, in Angular Material 2:
或者，在 Angular Material 2 中：
.mat-button.mat-small {
min-width: 1%;
}
回答by user1242321
Try the following class in your styles. You can adjust the pixel depending on how big/small you want the button to be.
在您的风格中尝试以下课程。您可以根据您希望按钮的大小来调整像素。
.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;
}
回答by tbone849
You could use css transform: scale(). You have to play with margins a little bit, but it isn't much code and you can go smaller or bigger pretty easily.
你可以使用 css transform: scale()。您必须稍微调整一下边距，但它的代码并不多，您可以很容易地变小或变大。
.shrink-2x {
transform: scale(0.5);
}
.enlarge-2x {
transform: scale(1.5);
}
回答by Sameeksha Kumari
I used this style for making a smaller md-button
我用这种风格制作了一个较小的 md 按钮
button {
min-height: 23px !important;
min-width: 46px !important;
font-size: 10px !important;
line-height: 0px;
}
回答by Nabil.A
I'm using https://github.com/angular/material2
我正在使用https://github.com/angular/material2
this creates smaller mini-fab.
这将创建更小的小型晶圆厂。
.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>回答by Brendan Metcalfe
I found that font-size must be on md-icon, and I needed a min-height on both the md-button and md-icon tags.
我发现字体大小必须在 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>
回答by Guillaume-Alexandre
If you are using md-icon-button, then material sets a width, height and padding for the icon:
如果您使用的是 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%;
}
so you need to override it ("auto"works well if you want the button to fit the parent)
所以你需要覆盖它（如果你想让按钮适合父级，“自动”效果很好）
.md-button.md-small {
padding: 0px;
margin: 0px;
height: auto;
width: auto;
min-height: 20px;
}
回答by Akshaya
Tiago's answer worked for me.
蒂亚戈的回答对我有用。
If you are using variants of mat buttons , raised button for example -
如果您使用的是垫子按钮的变体，例如凸起按钮 -
.mat-raised-button {
min-width: 150px;
}
