material-components-web - Material Components 中的持久抽屉

Question

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

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

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

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

谢谢

Answer 1

MDC 中的所有组件都有几种不同的方法，您可以根据您使用的 JS 来初始化它们。因此，虽然我的示例使用了 javascript 的 CDN 版本，但您可以在此处了解如何将我的示例转换为您使用的任何 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;
});