mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 14:34:05 +02:00
59 lines
2 KiB
HTML
59 lines
2 KiB
HTML
|
<div class="figure-wrapper">
|
||
|
|
<style>
|
||
|
|
main > .figure-wrapper {
|
||
|
|
/* prevent scrolling bars on menu open */
|
||
|
|
overflow: visible;
|
||
|
|
/* unset page styles */
|
||
|
|
--md-list-item-container-shape: 0px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<figure
|
||
|
|
style="justify-content: center"
|
||
|
|
aria-label="Two filled buttons next to each other. The first one says set with idref and the other says set with element ref. Interact with them to open their respective menus."
|
||
|
|
>
|
||
|
|
<span style="position: relative; margin-inline-end: 8px">
|
||
|
|
<md-filled-button id="usage-anchor">Set with idref</md-filled-button>
|
||
|
|
<md-menu id="usage-menu" anchor="usage-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>
|
||
|
|
</span>
|
||
|
|
<script type="module">
|
||
|
|
const anchorEl = document.body.querySelector("#usage-anchor");
|
||
|
|
const menuEl = document.body.querySelector("#usage-menu");
|
||
|
|
anchorEl.addEventListener("click", () => {
|
||
|
|
menuEl.open = !menuEl.open;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<span style="position: relative">
|
||
|
|
<md-filled-button id="usage-anchor-2">Set with element ref</md-filled-button>
|
||
|
|
<md-menu id="usage-menu-2">
|
||
|
|
<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>
|
||
|
|
</span>
|
||
|
|
<script type="module">
|
||
|
|
const anchorEl = document.body.querySelector("#usage-anchor-2");
|
||
|
|
const menuEl = document.body.querySelector("#usage-menu-2");
|
||
|
|
menuEl.anchorElement = anchorEl;
|
||
|
|
anchorEl.addEventListener("click", () => {
|
||
|
|
menuEl.open = !menuEl.open;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</figure>
|
||
|
|
</div>
|