एमडीएल हेडर पर बाईं ओर आइकन कैसे स्थानांतरित करें?

Question

मैंने हेडर के बाईं ओर बैक-तीर आइकन को स्थानांतरित करने के लिए मार्जिन, पैडिंग सेट करने का प्रयास किया लेकिन असफल रहा। मुझे यह कैसे सही करना चाहिए?

<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

मुझे बैक बटन के साथ एक ही समस्या थी। दस्तावेज़ों में कोई दृश्य डेमो नहीं है, लेकिन दस्तावेज़ीकरण को पढ़ने के लिए मुझे ऐसा करने का सही तरीका मिला: बस अपने बटन पर एक वर्ग mdl-layout-icon डालें। इस तरह क्लास 'एमडीएल-layout__drawer बटन' का उपयोग करने

<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

तुम्हारा मतलब है तुम हैडर के बाएं हिस्से को तीर आइकन वापस ले जाना चाहते हैं?

इस तरह?

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

आइकन वर्ग "एमडीएल-layout__header पंक्ति" में है, तो

आप, मार्जिन की स्थापना गद्दी से वापस तीर आइकन नहीं ले जा सकते।

आपको पता चलेगा कि क्या आप आइकन पर Ctrl + Shift + I करते हैं।

आप वर्ग "एमडीएल-layout__header" में आइकन बटन की स्थापना करके

"एमडीएल-layout__header पंक्ति" के बाईं ओर वापस तीर बटन स्थानांतरित कर सकते हैं।

मुझे आशा है कि यह मदद करता है आप :)

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> 

इस प्रयास करें, मैं एक ही समस्या थी और इस समाधान के साथ आया था।

Answer 4

प्रयास करें:

<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 के समाधान मेरे लिए काम किया है, लेकिन यह onclick के बिना पूरा नहीं है।

यह पूर्ण समाधान है।

class="mdl-layout__drawer-button" और history.back() का ज्ञान समस्या हल करता है।

mdl-layout__header के तहत और mdl-layout__header-row ऊपर इस लाइन

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

जोड़ें।

<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

एनीब के समाधान ने मेरे लिए काम किया। हालांकि, इसे प्रत्येक स्क्रीन आकार पर काम करने के लिए मुझे कुछ कस्टम सीएसएस लिखना पड़ा (हालांकि यह मेरे मामले के लिए विशिष्ट हो सकता है)।

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

    margin-left: 240px; 

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

यह और भी बड़ी स्क्रीन जहाँ आप पिछले पृष्ठ पर उपयोगकर्ता निर्देशन की कोई दूसरा रास्ता नहीं है और आप केवल उन पर भरोसा नहीं करना चाहते पर वापस बटन प्रदर्शित करता है: मैं इस प्रकार अपने ही .mdl-layout__back-button वर्ग परिभाषित ब्राउज़र के बैक बटन को मारना।