在 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 在 open/visible 时收到 .is-visible class。这个小 CSS-规则对我有用：

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

有了这个，您也不需要固定内容区域的宽度，因为您使用的不是边距而是填充。请注意，默认情况下 material.css 也会在抽屉可见时禁用滚动，因此您还需要将 overflow-属性添加到规则中：

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

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

Resize content when drawer is open in MDL

html

javascript

css

material-design-lite