抽屉在MDL中打开时调整内容的大小

Question

我正在构建基于MDL的网站。我试图实现的是抽屉不打开内容，但在旁边打开。我设法禁用了混淆器并修改了值top。

但是，我打算这样做的方式是随时抽屉打开内容区域将得到一个250px宽的左边距（抽屉宽度为250px）并调整其宽度以使width: calc(100% - 250px)。这很好，但我不知道这是否是最好的方法，即使是这样，我也不知道如何跟踪抽屉的状态。

这里的material.js如何处理的变化：

MaterialLayout.prototype.screenSizeHandler_ = function() { 
    if (this.screenSizeMediaQuery_.matches) { 
     this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN); 
    } else { 
     this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN); 
     // Collapse drawer (if any) when moving to a large screen size. 
     if (this.drawer_) { 
      this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); 
      this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); 
     } 
    } 
}; 

这是超出了我的技能，以弄清楚什么是真正回事。我试着用Chrome追踪它，但它太复杂了。

有没有一个微不足道的方法来做到这一点？如果不是，我该如何编辑脚本？

干杯！

Answer 1

.mdl-layout__drawer在打开/可见时收到.is-visible类。 这个小CSS规则为我工作：

.mdl-layout__drawer.is-visible ~ .mdl-layout__content { 
    padding-left: 250px; 
} 

有了这个，你也不需要修复的内容区域的宽度，因为你不使用保证金，但填充。请注意，默认情况下，material.css还会在抽屉可见时禁用滚动，因此您还需要将溢出属性添加到规则中：

.mdl-layout__drawer.is-visible ~ .mdl-layout__content { 
    overflow: auto !important; 
    padding-left: 250px; 
}