Постоянные ящики в Материальных Компонентах

Question

Я пытаюсь использовать ящики на странице JavaScript, но из документации я не могу понять, как компоненты HTML взаимодействуют вместе с Js.

В идеале я хотел бы добавить модальные ящики на мою HTML страницу, включив только DOM и JS без использования каких-либо внешних веб-фреймворков.

Я смотрю на эту документацию: https://material.io/develop/web/components/drawers/

Если кто-то знает, как это можно скрыть / показать с помощью кнопки.

спасибо

Answer 1

Все компоненты в MD C имеют несколько различных способов их инициализации в зависимости от того, какой 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;
});