右侧的Material Design Lite(MDL)导航抽屉 [英] Material Design Lite (MDL) Navigation Drawer on the right side

问题描述

我正在使用Web的Google Material Design Lite(MDL)，但无法将导航抽屉放在右侧. 该文档没有有关如何执行此操作的信息.那有可能吗?

I am using Google Material Design Lite (MDL) for web and I am unable to put the navigation drawer on the right side. The documentation has none information about how to do that. Is that even possible?

默认抽屉始终位于左侧.

The default drawer always come from the left.

<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>

推荐答案

以下是我阐述的工作原理. 希望对您有所帮助. 寻找您的想法和建议以进一步改进.

Here is the workaroud I elaborated. Hope it's helpful. Looking for you thoughts and your advice for further improvement.

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>

这篇关于右侧的Material Design Lite(MDL)导航抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！