Ist es möglich, eine MD-Taste kleiner zu machen?

Ich möchte, dass meine Buttons den linken und rechten Pfeil und JETZT Text so klein wie möglich darstellen. Wie mache ich das?Ist es möglich, eine MD-Taste kleiner zu machen?

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

Mit der aktuellen Lösung der Tasten angeordnet werden, als ob sie sich in einem layout="column" waren, das heißt in vertikaler Richtung.

Bevor ich mich mit diesem CSS-Stil beschäftige, wollte ich nur überprüfen, ob es eine bevorzugte Angular-Material-Methode gibt?

Quelle

2015-10-15 Andreas Selenwall

Möchten Sie den Text selbst kleiner oder die Taste selbst zu sein, müssen Sie eine benutzerdefinierte Klasse, um die Tasten betrachtet das Hinzufügen und einfach Ihr eigenes Styling hinzufügen und dann diese Klasse wieder verwenden, wo immer Sie Sie verwenden fühlen möchten das schon wieder? – TrojanMorse

Ich möchte nur die Schaltfläche kleiner sein, der Text sollte die gleiche Größe haben. Es soll eine .md-mini-Klasse geben, aber es macht nichts mit der Tastengröße. Ich schaue stattdessen mit md-icon-button nach, werde es später später ausprobieren und schauen, ob ich dann kleinere Buttons bekomme. –

Folgendes Ihre Stile hinzufügen:

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

, alternativ eine benutzerdefinierte Klasse verwenden:

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

Oder in Angular-Material 2:

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

Quelle

2015-11-09 12:36:10 Tiago

hat meinen Arsch gerettet, danke – noogui

Alle 'md' Präfixe sind jetzt' mat' Präfixe. Es ist jetzt '.mat-button' und' .mat-small' von Angular MAterial 2.0.0-beta.12 –

Danke! Ich füge das zur Antwort ein bisschen hinzu. – Tiago

die folgende Klasse Versuchen in deinen Stilen. Sie können das Pixel abhängig davon einstellen, wie groß/klein die Schaltfläche sein soll. Ich verwende https://github.com/angular/material2

das schafft kleine Mini-fab

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

Quelle

2016-03-04 06:19:35 user1242321

habe ich diesen Stil

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

Quelle

2016-04-29 03:53:08

eine kleinere md-Taste zu machen. einen min-height sowohl auf die md-Taste und md-icon-Tags

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

Quelle

2017-07-13 17:49:31

fand ich, dass font-size auf md-Symbol sein muss, und ich brauchte.

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

Quelle

2017-08-17 19:38:36 Brendan

Ist es möglich, eine MD-Taste kleiner zu machen?

Antwort

Verwandte Themen