Material 个组件中的永久抽屉

Question

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

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

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

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

谢谢

Answer 1

MDC 中的所有组件都有几种不同的方式，您可以根据您使用的 JS 来初始化它们。因此，虽然我的示例使用 javascript 的 CDN 版本，但您可以了解如何将我的示例转换为您正在使用的任何 JS 版本 here.

示例：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;
});

Material 个组件中的永久抽屉

Persistent drawers in Material Components

material-components-web