mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 14:34:05 +02:00
50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
<div class="figure-wrapper">
|
|
<figure
|
|
class="styled-example menu"
|
|
aria-label="A green, filled button with the text Themed menu. Interact with the button to open the green themed menu with 0 border-radius."
|
|
style="padding-block: 16px"
|
|
>
|
|
<style>
|
|
.styled-example {
|
|
background-color: #f4fbfa;
|
|
}
|
|
.styled-example md-filled-button {
|
|
--md-sys-color-primary: #006a6a;
|
|
--md-sys-color-on-primary: #ffffff;
|
|
}
|
|
.styled-example.menu md-menu {
|
|
--md-menu-container-color: #f4fbfa;
|
|
--md-menu-container-shape: 0px;
|
|
--md-sys-color-on-surface: #161d1d;
|
|
--md-sys-typescale-body-large-font: system-ui;
|
|
}
|
|
.styled-example.menu md-menu-item {
|
|
border-radius: 28px;
|
|
}
|
|
.styled-example.menu md-menu-item::part(focus-ring) {
|
|
border-radius: 28px;
|
|
}
|
|
</style>
|
|
<span style="position: relative">
|
|
<md-filled-button id="theming-anchor">Themed menu</md-filled-button>
|
|
<md-menu id="theming-menu" anchor="theming-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("#theming-anchor");
|
|
const menuEl = document.body.querySelector("#theming-menu");
|
|
anchorEl.addEventListener("click", () => {
|
|
menuEl.show();
|
|
});
|
|
</script>
|
|
</figure>
|
|
</div>
|