md-taille du bouton (angulaire du matériel)

Je suis très nouveau pour angulaires-le matériel et je suis en utilisant certains md-button directives. Comme je viens de l'Bootstrap monde, je suis à la recherche d'un moyen pour avoir des tailles différentes pour md-buttons. Quelque chose comme btn-xs et btn-sm classes dans le Bootstrap.

J'ai créé une classe md-button-xs et essayé de définir la taille du bouton à l'aide de cette classe, sans succès. J'ai même essayé de redimensionner le bouton à l'aide d'options pour les développeurs de Google Chrome, mais qui ne fonctionne pas trop.

Comment puis-je avoir des tailles différentes pour md-button et d'autres Angulaire composants Matériels?

Ce qui me dérange le plus à propos de toute cette question est qu'il n'y a pas de concept d'une "norme" bouton plus grand'. Il est assez facile d'ajouter votre propre classe, changement de hauteur de la ligne, flex / largeur et la taille de police, mais n'est pas matériel censé être sur une interface normalisée. Petit / standard boutons juste ne fonctionnent pas toujours bien.

OriginalL'auteur Najafsen | 2015-08-21

  1. 15

    Nous sommes tous (bien gentil de) nouvelle Angulaire du Matériel. Cela sert de mon avertissement à ma réponse.

    Je n'ai jamais passé beaucoup de temps avec twitter bootstrap, mais je peux vous dire que le fait de spécifier des tailles n'est probablement pas aussi important dans le domaine de l'Angulaire de Matériel.

    Pourquoi ne pas s'amuser avec les boutons les boutons de la page de démonstration? Ou est-il quelque chose de plus spécifique que vous cherchez à faire que vous avez besoin d'aide?
    https://material.angularjs.org/latest/#/demo/material.components.button

    J'ai foiré avec elle un peu pour vous! Assez simple une fois que vous aller de l'avant.
    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!

    Post écrit en référence à Angulaire du Matériel version 0.10.1 l'a. Si vous utilisez une version plus récente et que vous ne pouvez pas obtenir au courant des résultats, utiliser le site à changer de version après la navigation sur un de mes liens de comprendre quel est le problème. Et il y a toujours la changelog.

    Merci de prendre le temps de répondre à ma question. J'étais allé jeter tous les liens que vous avez mentionnés, sans succès. Ma décision a été de ne pas utiliser Angulaire du Matériel pour les applications web (pour l'instant), peut-être que je l'utilise pour certains mobiles applications hybrides.
    qu'est-ce que le succès que vous recherchez? Il me semble que vous êtes toujours désireux de définir un ensemble x et y de taille, ce qui est une très bonne réponse dans Angulaire n'est pas la meilleure façon d'aller. Aussi, s'il vous plaît marquer ma réponse comme accepté si vous êtes fait à ce sujet.
    les réponses ne peuvent être acceptés que s'ils résolu le problème concret de l'OP est question, non pas parce que quelqu'un est fait sur un sujet
    alors, comment puis-je résoudre le problème concret? Il est entré à l'écart de l'ensemble du "cadre".
    Je suppose que vous ne pouvez pas résoudre tous les problèmes.. 🙂 lire ceci: meta.stackexchange.com/questions/5234/...

    OriginalL'auteur William S

  2. 2

    Simplement, vous pouvez faire votre propre si vous le souhaitez, par exemple je n'ai que:

        .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 il fonctionne comme je m'y attendais:

    md-taille du bouton (angulaire du matériel)

    OriginalL'auteur Marzouk

  3. 2

    C'était un peu difficile pour moi. Le problème était que le min-width est définie par Angulaire de Matériel pour 88px. Je voulais mine d'être TRÈS petit. J'ai été paramètre width et max-width, mais n'avait pas pensé à vérifier min-width. Min-width est placée très haut pour une chose commune, comme un bouton... le min-width ou vous aurez des problèmes de redimensionnement si vous voulez qu'il soit de petite taille.

    OriginalL'auteur vbullinger

  4. 0

    Si vous définissez vos tailles emportaient sur les tailles par défaut dans les styles.fichier css avec le !important tag ils vont changer. c'est la seule façon que je pouvais mettre. Je dois préciser que c'est Angulaire et pas AngularJS, cependant, j'imagine que le principal fichier CSS 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;
}

    OriginalL'auteur JAM