mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 14:34:05 +02:00
30 lines
1 KiB
HTML
30 lines
1 KiB
HTML
<div class="figure-wrapper">
|
|
<figure
|
|
style="justify-content: center"
|
|
aria-label="A filled button that says open popover menu. Interact with the button to open a popover menu."
|
|
>
|
|
<div>
|
|
<div style="margin: 16px">
|
|
<md-filled-button id="usage-popover-anchor">Open popover menu</md-filled-button>
|
|
</div>
|
|
<md-menu positioning="popover" id="usage-popover" anchor="usage-popover-anchor">
|
|
<md-menu-item>
|
|
<div slot="headline">Apple</div>
|
|
</md-menu-item>
|
|
<md-menu-item>
|
|
<div slot="headline">Banana</div>
|
|
</md-menu-item>
|
|
<md-menu-item>
|
|
<div slot="headline">Cucumber</div>
|
|
</md-menu-item>
|
|
</md-menu>
|
|
</div>
|
|
<script type="module">
|
|
const anchorEl = document.body.querySelector("#usage-popover-anchor");
|
|
const menuEl = document.body.querySelector("#usage-popover");
|
|
anchorEl.addEventListener("click", () => {
|
|
menuEl.open = !menuEl.open;
|
|
});
|
|
</script>
|
|
</figure>
|
|
</div>
|