Simge, MDL üstbilgisinde sola nasıl hareket ettirilir?

Question

Kenar boşluğunu, dolguyu, başlığın solundaki geri ok simgesini taşımak için ayarlamayı denedim ancak başarısız oldu. Bunu nasıl düzeltmeliyim?

<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

Geri düğmeyle aynı sorunu yaşadım. Dokümanlarda görsel bir demo yok, ancak belgeleri doğru bir şekilde buldum: sadece bir butona mdl-layout-icon sınıfını koyun. Böyle sınıf 'mdl-layout__drawer-düğme' kullanmak

<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

Sen başlığının sol kısmına ok simgesine geri taşımak istiyor yani?

bunu beğendiniz mi?

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

simge sınıf "mdl-layout__header-sıra" halinde ise

,

Sen, dolgu marjını ayarlayarak arka ok simgesini hareket edemez.

Simgeye Ctrl + ÜstKrkt + I yapıp yapmadığınızı bileceksiniz.

Sen sınıf "mdl-layout__header" in simgesi düğmesini ayarlayarak

tarafından "mdl-layout__header-sıranın" sol tarafındaki geri ok düğmesine taşıyabilirsiniz.

ben de aynı sorunu vardı ve bu geçici çözüm ile geldi, o

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> 

bu deneyin :) yardımcı olur.

Answer 4

Dene:

<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

anneb çözümü benim için çalıştı, ancak onclick olmadan tamamlanmış değil.

Bu tam çözümdür. Bilgi, class="mdl-layout__drawer-button" ve history.back() bilgisini sorunu çözmektedir.

mdl-layout__header altında ve mdl-layout__header-row yukarıda bu satırı

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

ekleyin.

<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

anneb çözümü benim için çalıştı. Ancak, her ekran boyutunda çalışmasını sağlamak için bazı özel CSS yazmak zorunda kaldım (bu durum benim durumum için de geçerli olabilir). Bu bile önceki sayfaya yönlendiren başka hiçbir yolu yoktur ve onlara sadece güvenmek istemiyorum büyük ekranlarda geri düğmesini görüntüler

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

    margin-left: 240px; 

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

: Ben aşağıdaki gibi benim kendi .mdl-layout__back-button sınıf tanımlanmış tarayıcının geri düğmesine basmak.