Question

我试图在JavaScript页面中使用抽屉，但是从文档中我无法理解HTML组件如何与Js交互。

理想情况下，我想通过仅包含DOM和JS而不使用任何外部Web框架的方式将模式抽屉添加到HTML页面。

我正在查看此文档： https://material.io/develop/web/components/drawers/

如果有人知道如何隐藏/显示按钮。

谢谢

Answer 1

MDC中的所有组件都有几种不同的方式，您可以根据所使用的JS对其进行初始化。因此，尽管我的示例使用的是CDN版本的javascript，但是您可以了解如何将我的示例转换为所使用的here的任何JS版本。

示例：https://codepen.io/MrSimmons/pen/LYperJx

基本上，您要做的是将绘图附加到绘图html，然后单击按钮，触发绘图打开。

<aside class="mdc-drawer mdc-drawer--modal">
    ...
</aside>

// Create an instance of the draw
const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));

// On button click
document.querySelector('#open').addEventListener("click", ()=> {
    // Set the draw to whatever state it was not in last
    drawer.open = !drawer.open;
});

材料组件中的持久抽屉

1 个答案: