Malzeme Tasarımı Lite (MDL) Gezinme Çekmecesi Sağ tarafta

Question

Web için Google Materyal Tasarım Lite (MDL) kullanıyorum ve navigasyon çekmecesini sağ tarafa yerleştiremiyorum. Belgelerin, bunun nasıl yapılacağı hakkında hiçbir bilgisi yoktur. Bu mümkün mü?

Varsayılan çekmece her zaman soldan gelir.

<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

Bunu yapmak için doğru bir yol yok, ancak bir çözüm var.

İlk olarak, çekmece düğmesinin konumu üzerine yazmamız ve daha sonra sağda göründüğü şekilde tüm çekmeceye konumlandırmamız gerekiyor. Sonra çekmece animasyonunu düzeltmeliyiz.

mdl-layout__header sayfasından sonra aşağıdaki style etikete ekleyin.

<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

İşte detaylandırdığım workaroud. Umut yardımcı olur. Daha fazla iyileştirme için düşüncelerinizi ve tavsiyelerinizi araştırın.

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>