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也会禁用滚动，因此您还需要将overflow-property添加到规则中：

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

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

1 个答案: