mxnticek/MNotes
1
0
Fork 0
mirror of https://github.com/thejakubruzicka/MNotes.git synced 2025-07-10 14:34:05 +02:00
Code Issues Projects Releases Packages Wiki Activity

New version. Add Material UI implementation with theme customization, about dialog, and news system

Browse source
This commit is contained in:
VlastikYoutubeKo 2025-05-20 21:38:31 +02:00
parent 5bc9c9bdb1
commit 1d58835a65
190 changed files with 12296 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

58
components-wiki/figures/menu/usage.html Normal file
View file

@ -0,0 +1,58 @@
<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>