Я пытаюсь использовать ящики на странице JavaScript, но из документации я не могу понять, как компоненты HTML взаимодействуют вместе с Js.
В идеале я хотел бы добавить модальные ящики на свою HTML-страницу, включив только DOM и JS без использования какой-либо внешней веб-инфраструктуры.
Я просматриваю эту документацию: https://material.io/develop/web/components/drawers/
Если кто-то знает, как можно скрыть/показать кнопку.
спасибо
Все компоненты в 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;
});
