Come far spostare l'icona a sinistra sull'intestazione MDL?

Question

Ho provato a impostare il margine, il riempimento per spostare l'icona freccia indietro a sinistra dell'intestazione, ma non è riuscita. Come dovrei renderlo corretto?

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
<header class="mdl-layout__header"> 
    <div class="mdl-layout__header-row"> 
     <!--back arrow--> 
     <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);"> 
     <i class="material-icons">arrow_back</i> 
     </button> 

    <!--Title--> 
    <span class="mdl-layout-title">Settings</span> 
    </div> 

<!-- Tabs --> 
<div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
    <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a> 
    <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a> 
</div> 

Answer 1

Ho avuto lo stesso problema con il pulsante Indietro. Non c'è una demo visiva nei documenti, ma leggendo la documentazione ho trovato il modo giusto per farlo: basta mettere una classe mdl-layout-icon sul tuo pulsante.

<header class="mdl-layout__header"> 
    <button class="mdl-layout-icon mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);"> 
    <i class="material-icons">arrow_back</i> 
    </button>  
    <div class="mdl-layout__header-row"> 
    <span class="mdl-layout-title">Some title</span> 
    <div class="mdl-layout-spacer"></div> 
    </div> 
</header> 

Answer 2

Vuoi dire che si desidera spostare di nuovo l'icona freccia a parte sinistra della testata?

come questo?

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
<header class="mdl-layout__header"> 
     <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);"> 
     <i class="material-icons">arrow_back</i> 
     </button> 
    <div class="mdl-layout__header-row"> 
     <!--back arrow--> 


    <!--Title--> 
    <span class="mdl-layout-title">Settings</span> 
    </div> 

<!-- Tabs --> 
<div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
    <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a> 
    <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a> 
</div> 

Se l'icona è nella classe "MDL-layout__header-fila",

Non è possibile spostare l'icona della freccia indietro impostando margini, padding.

Si saprà se si fa Ctrl + Maiusc + I sull'icona.

è possibile spostare il tasto freccia indietro a sinistra di "MDL-layout__header-fila" di

impostando il pulsante con l'icona nella classe "MDL-layout__header".

Spero che aiuta voi :)

Answer 3

<div class="mdl-layout__header-row" style="padding-left: 2%;"> 
    <!--back arrow--> 
    <i class="material-icons" style="margin-right: 5%">arrow_back</i>  
    <!--Title--> 
    <span class="mdl-layout-title">Settings</span> 
</div> 

Prova questa, ho avuto lo stesso problema e si avvicinò con questa soluzione.

Answer 4

provare ad usare '-layout__drawer-tasto mdl' classe come questa: soluzione

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
    <header class="mdl-layout__header"> 
    <div class="mdl-layout__drawer-button"><i class="material-icons">arrow_back</i></div> 
    <div class="mdl-layout__header-row"> 
     <span class="mdl-layout-title">Title</span> 
    </div> 
    </header> 
    <main class="mdl-layout__content"> 
    <div class="page-content"> 
     Content 
    </div> 
    </main> 
</div> 

Answer 5

di AnneB lavorato per me, ma non è completa senza onclick.

Questa è la soluzione completa.

La conoscenza di class="mdl-layout__drawer-button" e history.back() risolve il problema.

Aggiungi questa linea

<div class="mdl-layout__drawer-button" onclick="history.back()"><i class="material-icons">arrow_back</i></div>

sotto e al di sopra mdl-layout__headermdl-layout__header-row.

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
    <header class="mdl-layout__header"> 
    <div class="mdl-layout__drawer-button" onclick="history.back()"><i class="material-icons">arrow_back</i></div> 
    <div class="mdl-layout__header-row"> 
     <span class="mdl-layout-title">Title</span> 
    </div> 
    </header> 
    <main class="mdl-layout__content"> 
    <div class="page-content"> 
     Content 
    </div> 
    </main> 
</div> 

Answer 6

la soluzione di anneb ha funzionato per me. Tuttavia, per farlo funzionare su tutte le dimensioni dello schermo ho dovuto scrivere alcuni CSS personalizzati (questo potrebbe essere specifico per il mio caso però). Ho definito la mia .mdl-layout__back-button classe come segue:

.mdl-layout--fixed-drawer .mdl-layout__back-button { 
    @extend .mdl-layout__drawer-button; 

    margin-left: 240px; 

    & + .mdl-layout__header-row { 
    padding-left: 72px; 
    } 
} 

Questo visualizza il pulsante indietro anche su schermi grandi in cui non avete altro modo di dirigere l'utente alla pagina precedente e che non si vuole fare di loro premendo il pulsante Indietro del browser.