Dimensioni del pulsante md (materiale angolare)

Question

Sono molto nuovo per il materiale angolare e sto utilizzando alcune direttive md-button. Mentre vengo dal mondo Bootstrap, sto cercando un modo per avere dimensioni diverse per md-button s. Qualcosa come le classi btn-xs e btn-sm in Bootstrap.

Ho creato una classe md-button-xs e ho provato a impostare la dimensione del pulsante utilizzando questa classe senza esito positivo. Ho anche provato a ridimensionare il pulsante utilizzando le opzioni sviluppatore in Google Chrome, ma non ha funzionato.

Come posso avere dimensioni diverse per md-button e altri componenti di materiale angolare?

Answer 1

Siamo tutti (molto gentili) nuovi in ​​materiale angolare. Questo è il mio disclaimer per la mia risposta.

Non ho mai trascorso molto tempo con il bootstrap di Twitter, ma posso dirvi che specificare le dimensioni non è probabilmente così importante nel regno di Angular Material.

• Il materiale angolare utilizza Flexbox. Specificare dimensioni specifiche è meno importante in Materiale angolare, l'ho trovato personalmente. Demo: Layout > Grid System
• Mentre si può fare molto con le griglie a ngMaterial (es: grid lists e child alignment), vi consiglio di vedere se le semplici layout attribute opere per voi "out of the box", per accompagnare l'uso generale di Flexbox.

Perché non scherzare con i pulsanti nella pagina di dimostrazione dei pulsanti? O c'è qualcosa di più specifico che stai cercando di fare con cui hai bisogno di aiuto? https://material.angularjs.org/latest/#/demo/material.components.button

Ho fatto un po 'di casino per voi! Cose piuttosto semplici una volta che vai avanti. 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> 

Buona fortuna!

Post scritto con riferimento a Angular Material version 0.10.1. Se si utilizza una versione più recente e non è possibile ottenere risultati familiari, utilizzare il sito per modificare la versione dopo aver sfogliato uno dei miei collegamenti per capire cosa c'è che non va. E c'è sempre il changelog.

Answer 2

Semplicemente si può fare il proprio se si vuole, ad esempio, l'ho fatto:

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

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

E funziona come mi aspettavo:

Answer 3

Questo è stato un po 'complicato per me. Il problema era che la larghezza minima è impostata da Materiale angolare a 88 px. Volevo che il mio fosse MOLTO piccolo. Stavo impostando la larghezza e la larghezza massima, ma non avevo pensato di controllare la larghezza minima. La larghezza minima è impostata su un valore globale, comune come un pulsante ... Quindi imposta la larghezza minima o avrai problemi a ridimensionarla se vuoi che sia piccola.

Answer 4

Se si impostano le dimensioni per superare le dimensioni predefinite negli stili.file css con il tag! important che cambieranno. questo è l'unico modo per impostarli. Devo chiarire che questo è per AngularJS angolari e non, invece, mi immagino che il file CSS principale avrebbe lo stesso beneficio in AngularJS

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

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