web-dev-qa-db-fra.com

taille du bouton md (matériau angulaire)

Je suis très nouveau dans le domaine des matériaux angulaires et j'utilise certaines directives md-button. Comme je viens du monde Bootstrap, je cherche un moyen d’avoir différentes tailles pour md-buttons. Quelque chose comme btn-xs et btn-sm dans Bootstrap.

J'ai créé une classe md-button-xs et j'ai essayé de définir la taille du bouton en utilisant cette classe sans succès. J'ai même essayé de redimensionner le bouton à l'aide des options de développement de Google Chrome, mais cela ne fonctionnait pas non plus.

Comment puis-je avoir différentes tailles pour md-button et d'autres composants de matériau Angular?

angularjsmaterial-designangular-material
9
Najafsen

Nous sommes tous (bien gentils) nouveaux pour Angular Material. Cela sert de déni à ma réponse.

Je n'ai jamais passé beaucoup de temps avec Twitter bootstrap, mais je peux vous dire que spécifier des tailles n'est probablement pas aussi important dans le domaine de Angular Material.

Pourquoi ne pas jouer avec les boutons de la page de démonstration? Ou cherchez-vous quelque chose de plus spécifique pour lequel vous avez besoin d’aide? ?__. https://material.angularjs.org/latest/#/demo/material.components.button

Je me suis un peu amusé avec vous! Des trucs assez simples une fois que vous y allez . http://codepen.io/qvazzler/pen/jPgbQO

<md-button flex="15">{{title1}} (Not much)</md-button>
<md-button flex="15" md-no-ink="" class="md-primary">Primary (Not much either)</md-button>
<md-button flex="33" ng-disabled="true" class="md-primary">Disabled (More space for me!)</md-button>
<md-button flex class="md-warn">{{title4}} (I'll have what's left)</md-button>

Bonne chance!

Poste écrit en référence à Angular Version matérielle 0.10.1 . Si vous utilisez une version plus récente et que vous ne parvenez pas à obtenir des résultats familiers, utilisez le site pour changer de version après avoir consulté l'un de mes liens afin de déterminer ce qui ne va pas. Et il y a toujours le changelog .

15
William S

C'était un peu délicat pour moi. Le problème était que la largeur minimale est définie par Angular Material à 88px. Je voulais que le mien soit TRÈS petit. Je réglais la largeur et la largeur maximale, mais je n'avais pas pensé à vérifier la largeur minimale. Min-width est réglé assez haut pour une fonction globale et commune telle qu'un bouton ... Réglez donc la largeur minimale ou vous aurez du mal à le redimensionner si vous voulez qu'il soit petit.

2
vbullinger

Vous pouvez simplement faire votre propre si vous voulez, par exemple je l'ai fait:

    .material-cust-large-button {
    width: 300px;
    height: 70px;
    padding-top: 13px;
}
.material-cust-medium-button {
    width: 150px;
    height: 70px;
    padding-top: 13px;
}

Et en html:

<md-button class="md-raised md-primary material-cust-large-button">text</md-button>
<md-button ui-sref="..." class="md-raised md-primary material-cust-medium-button">text</md-button>

Et cela fonctionne comme prévu:

 enter image description here

2
Marzouk

Si vous définissez vos tailles de manière à remplacer les tailles par défaut dans le fichier styles.css avec la balise! Important, elles seront modifiées. c'est la seule façon pour moi de les définir. Je dois préciser que c'est pour Angular et non pas AngularJS, cependant, j'imagine que le fichier CSS principal aurait le même avantage dans AngularJS

    .mat-radio-outer-circle {
  width: 15px !important;
  height: 15px !important;
}

.mat-radio-inner-circle {
  width: 15px !important;
  height: 15px !important;
}
0
JAM