MNotes/components-wiki/figures/menu/usage-fixed.html

31 lines
1,006 B
HTML
Raw Normal View History

<div class="figure-wrapper">
<figure
style="justify-content: center"
aria-label="A filled button that says open fixed menu. Interact with the button to open a fixed menu."
>
<div>
<div style="margin: 16px">
<md-filled-button id="usage-fixed-anchor">Open fixed menu</md-filled-button>
</div>
<md-menu positioning="fixed" id="usage-fixed" anchor="usage-fixed-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-fixed-anchor");
const menuEl = document.body.querySelector("#usage-fixed");
anchorEl.addEventListener("click", () => {
menuEl.open = !menuEl.open;
});
</script>
</figure>
</div>