Material Design Lite (MDL) Navigationsschublade auf der rechten Seite

Question

Ich verwende Google Material Design Lite (MDL) für das Internet und kann die Navigationsleiste nicht auf die rechte Seite legen. Die Dokumentation enthält keine Informationen dazu. Ist das überhaupt möglich?

Die Standardschublade kommt immer von links.

<header class="custom-header mdl-layout__header mdl-layout__header--waterfall"> 
    <div class="mdl-layout__drawer-button"> 
     <i class="material-icons">menu</i> 
    </div> 
    <div class="mdl-layout__header-row"> 
     <span class="mdl-layout-title">My App</span> 
    </div> 
</header> 
<div class="mdl-layout__drawer"> 
    drawer contents... 
</div> 

Answer 1

Es gibt nicht wirklich einen richtigen Weg, dies zu tun, aber es gibt einen Workaround.

Zuerst müssen wir die Position der Schubladen-Taste überschreiben und dann die gesamte Schublade so positionieren, dass sie auf der rechten Seite erscheint. Dann müssen wir die Schublade Animation reparieren.

Fügen Sie die folgenden style Tags nach Ihrer mdl-layout__header hinzu.

<header class="custom-header mdl-layout__header mdl-layout__header--waterfall"> 
    <div class="mdl-layout__header-row"> 
     <span class="mdl-layout-title">My App</span> 
    </div> 
</header> 
<div class="mdl-layout__drawer"> 
    drawer contents... 
</div> 

<style> 
    .mdl-layout__drawer-button, .mdl-layout__drawer{ 
     left: initial; 
     right: 0; 
    } 

    .mdl-layout__drawer{  
     transform:translateX(250px); 
    } 
</style> 

Answer 2

Hier ist die Workaroud ich ausgearbeitet. Ich hoffe, es ist hilfreich. Auf der Suche nach Ihren Gedanken und Ihrem Rat zur weiteren Verbesserung.

https://jsfiddle.net/VamosErik88/HTHnW/651/

<style> 
.mdl-layout__drawer-right { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    width: 240px; 
    height: 100%; 
    max-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); 
    box-sizing: border-box; 
    border-right: 1px solid #e0e0e0; 
    background: #fafafa; 
    -webkit-transform: translateX(250px); 
    -ms-transform: translateX(250px); 
    transform: translateX(250px); 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    will-change: transform; 
    -webkit-transition-duration: .2s; 
    transition-duration: .2s; 
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1); 
    transition-timing-function: cubic-bezier(.4,0,.2,1); 
    -webkit-transition-property: -webkit-transform; 
    transition-property: transform; 
    color: #424242; 
    overflow: visible; 
    overflow-y: auto; 
    z-index: 5; 
} 

.active { 
    -webkit-transform: translateX(0); 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
} 

.mdl-layout__obfuscator-right { 
    background-color: transparent; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 4; 
    visibility: hidden; 
    -webkit-transition-property: background-color; 
    transition-property: background-color; 
    -webkit-transition-duration: .2s; 
    transition-duration: .2s; 
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1); 
    transition-timing-function: cubic-bezier(.4,0,.2,1); 
} 

.mdl-layout__drawer-right.active~.mdl-layout__obfuscator-right { 
    background-color: rgba(0,0,0,.5); 
    visibility: visible; 
} 

.mdl-layout__drawer-right>.mdl-layout-title { 
    line-height: 56px; 
    padding-left: 16px; 
} 

</style> 

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> 
    <header class="mdl-layout__header"> 
    <div class="mdl-layout__header-row"> 
     <!-- Title --> 
     <span class="mdl-layout-title">Title</span> 
     <!-- Add spacer, to align navigation to the right --> 
     <div class="mdl-layout-spacer"></div> 
     <!-- Navigation --> 
     <div class="material-icons mdl-badge" id="notif" data-badge="5">notifications</div> 
    </div> 
    </header> 
    <div class="mdl-layout__drawer"> 
    <span class="mdl-layout-title">Title</span> 
    <nav class="mdl-navigation"> 
     <a class="mdl-navigation__link" href="">Link</a> 
     <a class="mdl-navigation__link" href="">Link</a> 
     <a class="mdl-navigation__link" href="">Link</a> 
     <a class="mdl-navigation__link" href="">Link</a> 
    </nav> 
    </div> 
    <div class="mdl-layout__drawer-right"> 
    <span class="mdl-layout-title">Notifications</span> 
    </div> 
    <main class="mdl-layout__content"> 
    </main> 
    <div class="mdl-layout__obfuscator-right"></div> 
</div> 

<script> 
$('#notif').click(function(){ 
if($('.mdl-layout__drawer-right').hasClass('active')){  
    $('.mdl-layout__drawer-right').removeClass('active'); 
} 
else{ 
    $('.mdl-layout__drawer-right').addClass('active'); 
} 
}); 

$('.mdl-layout__obfuscator-right').click(function(){ 
if($('.mdl-layout__drawer-right').hasClass('active')){  
    $('.mdl-layout__drawer-right').removeClass('active'); 
} 
else{ 
    $('.mdl-layout__drawer-right').addClass('active'); 
} 
}); 
</script>