Szuflada nawigacji Material Design Lite (MDL) po prawej stronie

Question

Używam Google Material Design Lite (MDL) w Internecie i nie mogę umieścić szuflady nawigacji po prawej stronie. W dokumentacji nie ma informacji o tym, jak to zrobić. Czy to w ogóle jest możliwe?

Domyślna szuflada zawsze pochodzi od lewej.

<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

Nie ma na to naprawdę odpowiedniego sposobu, ale istnieje obejście.

Najpierw musimy nadpisać pozycję przycisku szuflady, a następnie ustawić całą szufladę tak, aby była widoczna po prawej stronie. Następnie musimy naprawić animację szuflady.

Dołącz następujący znacznik style po numerze mdl-layout__header.

<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

Oto treść robocza, którą opracowałem. Mam nadzieję, że to pomocne. Poszukuję Twoich myśli i porad dotyczących dalszych ulepszeń.

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>