Material Design Lite (MDL) Навигационный ящик с правой стороны

Question

Я использую Google Material Design Lite (MDL) для Интернета, и я не могу разместить навигационный ящик с правой стороны. В документации нет информации о том, как это сделать. Возможно ли это?

Ящик по умолчанию всегда идет слева.

<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

На самом деле нет подходящего способа сделать это, но есть обходное решение.

Во-первых, мы должны переписать положение кнопки выдвижного ящика, а затем поместить на весь ящик таким образом, чтобы он отображался справа. Затем мы должны исправить анимацию ящика.

Включите следующую метку style после 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

Вот работа, которую я разработал. Надеюсь, это полезно. Ищете ваши мысли и ваши советы для дальнейшего совершенствования.

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>