web-dev-qa-db-fra.com

Est-il possible de réduire un md-button?

Je veux que mes boutons affichant les flèches gauche et droite et le texte NOW soient aussi petits que possible. Comment je fais ça?

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

Avec la solution actuelle, les boutons sont disposés comme s’ils se trouvaient dans un layout="column", c’est-à-dire verticalement.

Avant de creuser dans ce style CSS, je voulais juste vérifier s'il existe un moyen privilégié de créer un matériau angulaire.

cssangularjsmaterial-designangular-material
22
Andreas Selenwall

Ajoutez ce qui suit à vos styles:

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

Sinon, utilisez une classe personnalisée:

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

Ou, dans le matériau angulaire 2:

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

Essayez le cours suivant dans vos styles. Vous pouvez ajuster le pixel en fonction de la taille/taille souhaitée du bouton.

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

J'ai utilisé ce style pour faire un plus petit bouton md

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

J'utilise https://github.com/angular/material2

cela crée une mini-fab plus petite.

 enter image description here 

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

2
Nabil.A

J'ai trouvé que la taille de la police de caractères devait être sur md-icon et j'avais besoin d'une hauteur minimale sur les balises md-button et 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>
2
Brendan

Si vous utilisez md-icon-button, matériau définit alors la largeur, la hauteur et le remplissage de l’icône:

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

vous devez donc le remplacer ( "auto" fonctionne bien si vous voulez que le bouton s'adapte au parent)

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