Ngăn kéo điều hướng Material Design Lite (MDL) ở bên phải

Question

Tôi đang sử dụng Google Material Design Lite (MDL) cho web và tôi không thể đặt ngăn điều hướng ở bên phải. Tài liệu không có thông tin về cách thực hiện điều đó. Điều đó thậm chí có thể?

Ngăn kéo mặc định luôn đến từ bên trái.

<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

Không thực sự có cách thích hợp để thực hiện việc này, nhưng có cách giải quyết khác.

Trước tiên, chúng ta phải ghi đè lên vị trí của nút ngăn kéo, sau đó định vị đến toàn bộ ngăn sao cho nó xuất hiện ở bên phải. Sau đó, chúng tôi phải sửa hoạt ảnh ngăn kéo.

Bao gồm các thẻ sau style sau mdl-layout__header của bạn.

<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

Đây là workaroud tôi đã xây dựng. Hy vọng nó hữu ích. Tìm kiếm suy nghĩ và lời khuyên của bạn để cải thiện hơn nữa.

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>