Painikkeet

Värillisiä painikkeita tulee käyttää vain ensisijaisiin toimiin. Käytä toissijaisissa toimissa, mukaan lukien linkit, tavallista (valkoista) painiketta. Näin ollen kaikki entiset punaiset ja vihreät painikkeet näkyvät sinisinä kuten muutkin ensisijaiset toiminnot. Mitä tahansa alla olevista tyyleistä voidaan käyttää myös <button> , <input type="submit"> ja niin edelleen kanssa.

Ensisijainen toissijainen asunto pois käytöstä

<a class="button button-primary" href="#buttons">Primary</a>
<a class="button" href="#buttons">Secondary</a>
<a class="button button-white" href="#buttons">Flat</a>
<a class="button button-disabled" href="#buttons">Disabled</a>

Jos ensimmäisen painikkeen luokka on button-white , sen tarran vasenta reunaa ei kohdisteta sen ylä- tai alapuolella olevien elementtien vasempaan reunaan. Voit vetää painikkeen tasaukseen lisäämällä painikkeeseen myös button-unindented luokan.

Ensimmäisen painikkeen otsikko ei ole tasattu vasemmalle tämän tekstilohkon kanssa:

Painike yksi Painike kaksi

<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Nyt ensimmäisen painikkeen otsikko tasataan vasemmalle tämän tekstilohkon kanssa:

Painike yksi Painike kaksi

<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Painikkeet, joissa on kuvake etiketin edessä

Jos haluat näyttää kuvakkeen ennen painikkeen otsikkoa, lisää button-with-icon kuvakkeella -luokka ja lisää <span class="material-icons" aria-hidden="true">icon_name</span> ennen painikkeen tekstisisältöä. etiketti, jossa kuvakkeen_nimi on materiaalisuunnittelukuvake .

Ensisijainen Toissijainen Taso

<a class="button button-with-icon button-primary" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Primary
</a>
<a class="button button-with-icon" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Secondary
</a>
<a class="button button-with-icon button-white" href="#buttons">
  <span class="material-icons" aria-hidden="true">add</span>Flat
</a>

Painikkeet, joissa on kuvake tarran jälkeen

Jos haluat näyttää kuvakkeen painikkeen otsikon jälkeen, lisää button-with-icon kuvakkeella -luokka ja lisää <span class="material-icons icon-after" aria-hidden="true">icon_name</span> tekstin perään. tarran sisältö, jossa icon_name on materiaalisuunnittelukuvake.

Ensisijainen Toissijainen Tasainen 

<a class="button button-with-icon button-primary" href="#buttons">
  Primary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon" href="#buttons">
  Secondary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon button-white" href="#buttons">
  Flat<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>