mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 22:44:05 +02:00
New version. Add Material UI implementation with theme customization, about dialog, and news system
This commit is contained in:
parent
5bc9c9bdb1
commit
1d58835a65
190 changed files with 12296 additions and 54 deletions
50
components-wiki/figures/menu/theming.html
Normal file
50
components-wiki/figures/menu/theming.html
Normal file
|
@ -0,0 +1,50 @@
|
|||
<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>
|
30
components-wiki/figures/menu/usage-document.html
Normal file
30
components-wiki/figures/menu/usage-document.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center"
|
||||
aria-label="A filled button that says open document menu. Interact with the button to open a document menu."
|
||||
>
|
||||
<div>
|
||||
<div style="margin: 16px">
|
||||
<md-filled-button id="usage-document-anchor">Open document menu</md-filled-button>
|
||||
</div>
|
||||
<md-menu positioning="document" id="usage-document" anchor="usage-document-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-document-anchor");
|
||||
const menuEl = document.body.querySelector("#usage-document");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
30
components-wiki/figures/menu/usage-fixed.html
Normal file
30
components-wiki/figures/menu/usage-fixed.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<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>
|
30
components-wiki/figures/menu/usage-popover.html
Normal file
30
components-wiki/figures/menu/usage-popover.html
Normal file
|
@ -0,0 +1,30 @@
|
|||
<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>
|
63
components-wiki/figures/menu/usage-submenu.html
Normal file
63
components-wiki/figures/menu/usage-submenu.html
Normal file
|
@ -0,0 +1,63 @@
|
|||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content: center"
|
||||
aria-label="A filled button that says menu with submenus. Interact with the button to interact with a menu that has two sub menus."
|
||||
>
|
||||
<span style="position: relative">
|
||||
<md-filled-button id="usage-submenu-anchor"> Menu with Submenus </md-filled-button>
|
||||
<!-- Note the has-overflow attribute -->
|
||||
<md-menu has-overflow id="usage-submenu" anchor="usage-submenu-anchor">
|
||||
<md-sub-menu>
|
||||
<md-menu-item slot="item">
|
||||
<div slot="headline">Fruits with A</div>
|
||||
<!-- Arrow icons are helpful affordances -->
|
||||
<md-icon slot="end">arrow_right</md-icon>
|
||||
</md-menu-item>
|
||||
<!-- Submenu must be slotted into sub-menu's menu slot -->
|
||||
<md-menu slot="menu">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Apricot</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline">Avocado</div>
|
||||
</md-menu-item>
|
||||
<!-- Nest as many as you want and control menu anchoring -->
|
||||
<md-sub-menu menu-corner="start-end" anchor-corner="start-start">
|
||||
<md-menu-item slot="item">
|
||||
<div slot="headline">Apples</div>
|
||||
<!-- Arrow icons are helpful affordances -->
|
||||
<md-icon slot="start">
|
||||
arrow_left
|
||||
</md-icon>
|
||||
</md-menu-item>
|
||||
<md-menu slot="menu">
|
||||
<md-menu-item>
|
||||
<div slot="headline">Fuji</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline" style="white-space: nowrap;">Granny Smith</div>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<div slot="headline" style="white-space: nowrap;">Red Delicious</div>
|
||||
</md-menu-item>
|
||||
</md-menu>
|
||||
</md-sub-menu>
|
||||
</md-menu>
|
||||
</md-sub-menu>
|
||||
<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-submenu-anchor");
|
||||
const menuEl = document.body.querySelector("#usage-submenu");
|
||||
anchorEl.addEventListener("click", () => {
|
||||
menuEl.open = !menuEl.open;
|
||||
});
|
||||
</script>
|
||||
</figure>
|
||||
</div>
|
58
components-wiki/figures/menu/usage.html
Normal file
58
components-wiki/figures/menu/usage.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue