mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 22:44:05 +02:00
31 lines
1 KiB
HTML
31 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>
|