È possibile rendere un tasto md più piccolo?

Desidero che i miei pulsanti mostrino la freccia sinistra e destra e il testo ORA il più piccolo possibile. Come lo faccio?È possibile rendere un tasto md più piccolo?

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

Con la soluzione attuale i pulsanti vengono disposti come se fossero in un layout="column", cioè verticalmente.

Prima di scavare in questo stile CSS, volevo solo verificare se esiste un metodo Angular-Material preferito per farlo?

fonte

2015-10-15 Andreas Selenwall

si desidera che il testo stesso di essere più piccolo o il pulsante stesso, avete considerato l'aggiunta di una classe personalizzata ai pulsanti e basta aggiungere il proprio stile e quindi riutilizzare quella classe dove mai si potrebbe sentire che si desidera utilizzare questo di nuovo? – TrojanMorse

Voglio solo che il pulsante sia più piccolo, il testo dovrebbe avere le stesse dimensioni. Ci dovrebbe essere una classe .md-mini, ma non fa nulla con le dimensioni del pulsante. Sto cercando di usare md-icon-button, invece, lo proveremo più tardi oggi e vedrò se ottengo dei bottoni più piccoli. –

Aggiungere il seguente i vostri stili:

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

In alternativa, utilizzare una classe personalizzata:

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

Oppure, in Materiale angolare 2:

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

fonte

2015-11-09 12:36:10 Tiago

salvato il mio culo, grazie – noogui

Tutti i prefissi 'md' sono ora prefissi' mat'. Ora è '.mat-button' e' .mat-small' di Angular MAterial 2.0.0-beta.12 –

Grazie! Lo aggiungerò alla risposta tra un po '. – Tiago

provare la seguente classe nei tuoi stili. Puoi regolare il pixel in base a quanto grande o piccolo vuoi che sia il pulsante.

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

fonte

2016-03-04 06:19:35 user1242321

Ho usato questo stile per fare un md-tasto più piccolo

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

fonte

2016-04-29 03:53:08

sto usando https://github.com/angular/material2

questo crea più piccoli 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>

fonte

2017-07-13 17:49:31

ho scoperto che font-size deve essere su md-icona, e avevo bisogno di un min-height su entrambi i tasti md l'e MD-icona tag.

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

fonte

2017-08-17 19:38:36 Brendan

È possibile rendere un tasto md più piccolo?

risposta

Problemi correlati