mxnticek/MNotes
1
0
Fork 0
mirror of https://github.com/thejakubruzicka/MNotes.git synced 2025-07-11 06:54:04 +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

22
components-wiki/figures/checkbox/theming.html Normal file
View file

@ -0,0 +1,22 @@
<div class="figure-wrapper">
<figure
style="justify-content: center; align-items: center"
class="styled-example"
aria-label="Image of a checkbox with a different theme applied"
>
<style>
.styled-example {
background-color: white;
border-radius: 28px;
/* System tokens */
--md-sys-color-primary: #006a6a;
--md-sys-color-on-primary: #ffffff;
--md-sys-color-on-surface-variant: #3f4948;
/* Component tokens */
--md-checkbox-container-shape: 0px;
}
</style>
<md-checkbox touch-target="wrapper"></md-checkbox>
<md-checkbox touch-target="wrapper" checked></md-checkbox>
</figure>
</div>

13
components-wiki/figures/checkbox/usage-label.html Normal file
View file

@ -0,0 +1,13 @@
<div class="figure-wrapper">
<figure
style="justify-content: center; align-items: center"
aria-label="Two checkboxes with labels"
>
<label style="display: flex; align-items: center">
<md-checkbox touch-target="wrapper"></md-checkbox>
Checkbox one
</label>
<md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox>
<label for="checkbox-two">Checkbox two</label>
</figure>
</div>

9
components-wiki/figures/checkbox/usage.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;"
aria-label="Three checkboxes in a row that are unselected, selected, and indeterminate">
<md-checkbox touch-target="wrapper"></md-checkbox>
<md-checkbox touch-target="wrapper" checked></md-checkbox>
<md-checkbox touch-target="wrapper" indeterminate></md-checkbox>
</figure>
</div>

25
components-wiki/figures/fab/extended-fabs.html Normal file
View file

@ -0,0 +1,25 @@
<div class="figure-wrapper">
<figure
class="types-image"
style="justify-content:center;"
title="There are two types of extended FABs with and without icon"
aria-label="2 examples of extended FABs">
<div class="wrapper">
<div>
<div class="fab-wrapper">
<md-fab label="navigate" variant="primary">
<md-icon slot="icon">navigation</md-icon>
</md-fab>
</div>
<span>1</span>
</div>
<div>
<div class="fab-wrapper">
<md-fab variant="surface" label="reroute">
</md-fab>
</div>
<span>2</span>
</div>
</div>
</figure>
</div>

65
components-wiki/figures/fab/fabs.html Normal file
View file

@ -0,0 +1,65 @@
<div class="figure-wrapper">
<figure
class="types-image"
style="justify-content:center;"
title="There are three sizes of floating action buttons: FAB, small FAB, and large FAB"
aria-label="The 3 sizes of FAB">
<style>
.types-image .wrapper,
.types-image .wrapper > * {
display: flex;
padding: 8px;
flex-wrap: wrap;
justify-content: center;
}
.types-image .wrapper > * {
flex-direction: column;
align-items: center;
padding-inline: 16px;
}
.types-image span {
display: inline-flex;
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
padding: 8px;
margin-block-start: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.types-image .fab-wrapper {
height: 96px;
display: flex;
align-items: center;
}
</style>
<div class="wrapper">
<div>
<div class="fab-wrapper">
<md-fab variant="primary" aria-label="Accessibility">
<md-icon slot="icon">accessible_forward</md-icon>
</md-fab>
</div>
<span>1</span>
</div>
<div>
<div class="fab-wrapper">
<md-fab variant="tertiary" size="small" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</div>
<span>2</span>
</div>
<div>
<div class="fab-wrapper">
<md-fab size="large" aria-label="Color Palette">
<md-icon slot="icon">palette</md-icon>
</md-fab>
</div>
<span>3</span>
</div>
</div>
</figure>
</div>

33
components-wiki/figures/fab/theming-branded.html Normal file
View file

@ -0,0 +1,33 @@
<div class="figure-wrapper">
<figure
class="styled-example branded"
aria-label="Image of two branded fabs, one regular, one extended with the visible label Add with a different theme applied"
style="padding-block: 16px;gap: 16px;display: flex;">
<style>
.styled-example.branded {
--md-sys-color-on-surface: #161d1d;
--md-fab-branded-label-text-font: system-ui;
--md-fab-branded-icon-size: 48px;
--md-fab-branded-container-shape: 0px;
}
</style>
<md-branded-fab size="small" aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
<md-branded-fab size="small" label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

17
components-wiki/figures/fab/theming-extended.html Normal file
View file

@ -0,0 +1,17 @@
<div class="figure-wrapper">
<figure
class="styled-example extended"
aria-label="Image of an extended FAB with a different theme applied"
style="padding-block: 16px;">
<style>
.styled-example.extended {
--md-fab-label-text-font: system-ui;
--md-fab-icon-size: 36px;
--md-fab-container-shape: 0px;
}
</style>
<md-fab label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

21
components-wiki/figures/fab/theming-fab.html Normal file
View file

@ -0,0 +1,21 @@
<div class="figure-wrapper">
<figure
class="styled-example fab"
aria-label="Image of a fab with a different theme applied"
style="padding-block: 16px;">
<style>
.styled-example {
--md-sys-color-surface-container-high: #e3e9e9;
--md-sys-color-primary: #006a6a;
background-color: #f4fbfa;
}
.styled-example.fab {
--md-fab-icon-size: 36px;
--md-fab-container-shape: 0px;
}
</style>
<md-fab aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

15
components-wiki/figures/fab/usage-branded-extended.html Normal file
View file

@ -0,0 +1,15 @@
<div class="figure-wrapper">
<figure
aria-label="An extended branded fab with a google-colored plus icon and the visible text Add"
style="padding-block: 16px;">
<md-branded-fab label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

25
components-wiki/figures/fab/usage-branded-sizes.html Normal file
View file

@ -0,0 +1,25 @@
<div class="figure-wrapper">
<figure
aria-label="Two branded FABs next to each other with a google-branded plus icon. A medium sized one and a large one."
style="padding-block: 16px; gap: 16px; display: flex"
>
<md-branded-fab aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
<md-branded-fab size="large" aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

15
components-wiki/figures/fab/usage-branded.html Normal file
View file

@ -0,0 +1,15 @@
<div class="figure-wrapper">
<figure
aria-label="A branded FAB with a google-colored plus icon."
style="padding-block: 16px;">
<md-branded-fab size="small" aria-label="Add">
<svg slot="icon" viewBox="0 0 36 36">
<path fill="#34A853" d="M16 16v14h4V20z"></path>
<path fill="#4285F4" d="M30 16H20l-4 4h14z"></path>
<path fill="#FBBC05" d="M6 16v4h10l4-4z"></path>
<path fill="#EA4335" d="M20 16V6h-4v14z"></path>
<path fill="none" d="M0 0h36v36H0z"></path>
</svg>
</md-branded-fab>
</figure>
</div>

15
components-wiki/figures/fab/usage-color.html Normal file
View file

@ -0,0 +1,15 @@
<div class="figure-wrapper">
<figure
aria-label="Three fabs with edit icons next to each other but the first is primary colored, second is secondary, and the last is tertiary colored."
style="padding-block: 16px;gap: 16px;display: flex;">
<md-fab variant="primary" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab variant="secondary" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab variant="tertiary" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

9
components-wiki/figures/fab/usage-extended.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="An extended FAB with an edit icon and the visible text edit"
style="padding-block: 16px;">
<md-fab label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

9
components-wiki/figures/fab/usage-fab.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="A standard surface fab"
style="padding-block: 16px;">
<md-fab aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

9
components-wiki/figures/fab/usage-lowered.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="A standard fab with an edit icon and lowered in elevation"
style="padding-block: 16px;">
<md-fab lowered aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

19
components-wiki/figures/fab/usage-sizes.html Normal file
View file

@ -0,0 +1,19 @@
<div class="figure-wrapper">
<figure
aria-label="Four surface fabs side by side with edit icons of visual size size small, small, medium, and large"
style="padding-block: 16px; gap: 16px; display: flex"
>
<md-fab size="small" touch-target="none" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab size="small" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
<md-fab size="large" aria-label="Edit">
<md-icon slot="icon">edit</md-icon>
</md-fab>
</figure>
</div>

7
components-wiki/figures/fab/usage-without-icon.html Normal file
View file

@ -0,0 +1,7 @@
<div class="figure-wrapper">
<figure
aria-label="An extended FAB with a visible label saying reroute"
style="padding-block: 16px;">
<md-fab label="Reroute"></md-fab>
</figure>
</div>

66
components-wiki/figures/iconbutton/buttons.html Normal file
View file

@ -0,0 +1,66 @@
<div class="figure-wrapper">
<figure
class="types-image"
style="justify-content:center;"
title="1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)"
aria-label="Side by side view of standard and contained icon buttons">
<style>
.types-image .wrapper,
.types-image .wrapper > * {
display: flex;
padding: 8px;
flex-wrap: wrap;
justify-content: center;
}
.types-image .wrapper > * {
flex-direction: column;
align-items: center;
padding-inline: 16px;
}
.types-image span {
display: inline-flex;
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
padding: 8px;
margin-block-start: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
justify-content: center;
align-items: center;
}
.types-image .wrapper > div > div {
display: flex;
gap: 8px;
}
</style>
<div class="wrapper">
<div>
<div>
<md-icon-button>
<md-icon>favorite</md-icon>
</md-icon-button>
<md-icon-button toggle selected>
<md-icon slot="selected" class="filled">bookmark</md-icon>
<md-icon class="filled">bookmark</md-icon>
</md-icon-button>
</div>
<span>1</span>
</div>
<div>
<div>
<md-filled-icon-button>
<md-icon>videocam</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button>
<md-icon>settings</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button>
<md-icon>more_vert</md-icon>
</md-outlined-icon-button>
</div>
<span>2</span>
</div>
</div>
</figure>
</div>

20
components-wiki/figures/iconbutton/theming-filled-tonal.html Normal file
View file

@ -0,0 +1,20 @@
<div class="figure-wrapper">
<figure
class="styled-example tonal"
title="Filled tonal icon button theming example."
aria-label="Image of a filled tonal icon button with a different theme applied">
<style>
.styled-example.tonal {
--md-filled-tonal-icon-button-container-width: 80px;
--md-filled-tonal-icon-button-container-height: 80px;
--md-filled-tonal-icon-button-container-shape: 0px;
--md-filled-tonal-icon-button-icon-size: 40px;
--md-sys-color-secondary-container: #006A6A;
padding-block: 8px;
}
</style>
<md-filled-tonal-icon-button>
<md-icon>check</md-icon>
</md-filled-tonal-icon-button>
</figure>
</div>

20
components-wiki/figures/iconbutton/theming-filled.html Normal file
View file

@ -0,0 +1,20 @@
<div class="figure-wrapper">
<figure
class="styled-example filled red"
title="Filled icon button theming example."
aria-label="Image of a filled icon button with a different theme applied">
<style>
.styled-example.filled {
--md-filled-icon-button-container-width: 80px;
--md-filled-icon-button-container-height: 80px;
--md-filled-icon-button-icon-size: 40px;
--md-filled-icon-button-container-shape: 0px;
--md-sys-color-primary: #dc362e;
padding-block: 8px;
}
</style>
<md-filled-icon-button>
<md-icon>check</md-icon>
</md-filled-icon-button>
</figure>
</div>

21
components-wiki/figures/iconbutton/theming-outlined.html Normal file
View file

@ -0,0 +1,21 @@
<div class="figure-wrapper">
<figure
class="styled-example outlined"
title="Outlined icon button theming example."
aria-label="Image of an outlined icon button with a different theme applied">
<style>
.styled-example.outlined > * {
--md-outlined-icon-button-container-width: 80px;
--md-outlined-icon-button-container-height: 80px;
--md-outlined-icon-button-container-shape: 0px;
--md-outlined-icon-button-icon-size: 40px;
--md-outlined-icon-button-unselected-outline-width: 4px;
--md-sys-color-outline: #006A6A;
padding-block: 8px;
}
</style>
<md-outlined-icon-button>
<md-icon>check</md-icon>
</md-outlined-icon-button>
</figure>
</div>

22
components-wiki/figures/iconbutton/theming-standard.html Normal file
View file

@ -0,0 +1,22 @@
<div class="figure-wrapper">
<figure
class="styled-example standard red"
title="Standard icon button theming example."
aria-label="Image of a standard icon button with a different theme applied">
<style>
.styled-example {
background-color: white;
}
.styled-example.red {
background-color: #fff8f6;
}
.styled-example.standard {
--md-icon-button-icon-size: 32px;
--md-sys-color-on-surface-variant: #dc362e;
}
</style>
<md-icon-button>
<md-icon>check</md-icon>
</md-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-filled-tonal.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Filled Tonal Icon Button"
aria-label="A filled tonal icon button with a check icon">
<md-filled-tonal-icon-button>
<md-icon>check</md-icon>
</md-filled-tonal-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-filled.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Filled Icon Button"
aria-label="A circular button with a check icon">
<md-filled-icon-button>
<md-icon>check</md-icon>
</md-filled-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-outlined.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Outlined Icon button"
aria-label="An outlined circular icon button with a check icon">
<md-outlined-icon-button>
<md-icon>check</md-icon>
</md-outlined-icon-button>
</figure>
</div>

10
components-wiki/figures/iconbutton/usage-standard.html Normal file
View file

@ -0,0 +1,10 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Standard Icon Button with Check icon"
aria-label="A check icon">
<md-icon-button>
<md-icon>check</md-icon>
</md-icon-button>
</figure>
</div>

42
components-wiki/figures/iconbutton/usage-toggle.html Normal file
View file

@ -0,0 +1,42 @@
<div class="figure-wrapper">
<figure
style="gap:8px;flex-direction:column;padding-block:8px;"
aria-label="Two rows of toggling icon buttons, the top row is unselected and the bottom row is selected">
<div style="display:flex;gap:8px;">
<md-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-icon-button>
<md-filled-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button toggle>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-outlined-icon-button>
</div>
<div style="display:flex;gap:8px;">
<md-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-icon-button>
<md-filled-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button toggle selected>
<md-icon>close</md-icon>
<md-icon slot="selected">check</md-icon>
</md-outlined-icon-button>
</div>
</figure>
</div>

19
components-wiki/figures/iconbutton/usage.html Normal file
View file

@ -0,0 +1,19 @@
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Icon buttons can be used within other components, such as a bottom app bar"
aria-label="A row of icon buttons">
<md-icon-button>
<md-icon>check</md-icon>
</md-icon-button>
<md-filled-icon-button>
<md-icon>check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button>
<md-icon>check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button>
<md-icon>check</md-icon>
</md-outlined-icon-button>
</figure>
</div>

39
components-wiki/figures/list/theming-icon.html Normal file
View file

@ -0,0 +1,39 @@
<div class="figure-wrapper">
<figure
class="styled-example icon"
aria-label="Image of a list and icon list items of food names with a different theme applied"
style="padding-block: 16px;">
<style>
.styled-example.icon md-list {
--md-list-container-color: #f4fbfa;
--md-list-item-label-text-color: #161d1d;
--md-list-item-supporting-text-color: #3f4948;
--md-list-item-trailing-supporting-text-color: #3f4948;
--md-list-item-leading-icon-color: #006a6a;
--md-list-item-trailing-icon-color: #006a6a;
--md-list-item-leading-icon-size: 20px;
--md-list-item-trailing-icon-size: 20px;
}
.styled-example.icon md-list .unhealthy {
--md-list-item-trailing-icon-color: #ba1a1a;
}
</style>
<md-list>
<md-list-item>
<div slot="headline">Eggs</div>
<md-icon slot="start">egg</md-icon>
<md-icon slot="end">recommend</md-icon>
</md-list-item>
<md-list-item class="unhealthy">
<div slot="headline">Ice Cream</div>
<md-icon slot="start">icecream</md-icon>
<md-icon slot="end">dangerous</md-icon>
</md-list-item>
<md-list-item>
<div slot="headline">Orange</div>
<md-icon slot="start">nutrition</md-icon>
<md-icon slot="end">recommend</md-icon>
</md-list-item>
</md-list>
</figure>
</div>

35
components-wiki/figures/list/theming-image.html Normal file
View file

@ -0,0 +1,35 @@
<div class="figure-wrapper">
<figure
class="styled-example image"
aria-label="Image of a list and image list items of cats with a different theme applied"
style="padding-block: 16px"
>
<style>
.styled-example.image md-list {
--md-list-container-color: #f4fbfa;
--md-list-item-label-text-color: #161d1d;
--md-list-item-supporting-text-color: #3f4948;
--md-list-item-trailing-supporting-text-color: #3f4948;
}
.styled-example.image md-list img {
height: 50px;
width: 100px;
border-radius: 25px;
}
</style>
<md-list>
<md-list-item>
<div slot="headline">Wide Cat</div>
<img loading="lazy" slot="start" src="https://placekitten.com/200/100">
</md-list-item>
<md-list-item>
<div slot="headline">Round kitty cat</div>
<img loading="lazy" slot="start" src="https://placekitten.com/202/101">
</md-list-item>
<md-list-item>
<div slot="headline">Softe cate</div>
<img loading="lazy" slot="start" src="https://placekitten.com/212/106">
</md-list-item>
</md-list>
</figure>
</div>

42
components-wiki/figures/list/theming-list.html Normal file
View file

@ -0,0 +1,42 @@
<div class="figure-wrapper">
<figure
class="styled-example list"
aria-label="Image of a list and list items of foods with their inventory stock number with a different theme applied"
style="padding-block: 16px;">
<style>
.styled-example {
background-color: #f4fbfa;
}
.styled-example.list md-list {
--md-list-container-color: #f4fbfa;
--md-list-item-label-text-color: #161d1d;
--md-list-item-supporting-text-color: #3f4948;
--md-list-item-trailing-supporting-text-color: #3f4948;
--md-list-item-label-text-font: system-ui;
--md-list-item-supporting-text-font: system-ui;
--md-list-item-trailing-supporting-text-font: system-ui;
}
.styled-example.list md-list [slot="trailing-supporting-text"] {
width: 30px;
text-align: end;
}
</style>
<md-list>
<md-list-item type="button">
<div slot="headline">Apple</div>
<div slot="supporting-text">In stock</div>
<div slot="trailing-supporting-text">+100</div>
</md-list-item>
<md-list-item type="button">
<div slot="headline">Banana</div>
<div slot="supporting-text">In stock</div>
<div slot="trailing-supporting-text">56</div>
</md-list-item>
<md-list-item type="button">
<div slot="headline">Cucumber</div>
<div slot="supporting-text">Low stock</div>
<div slot="trailing-supporting-text">5</div>
</md-list-item>
</md-list>
</figure>
</div>

31
components-wiki/figures/list/usage-icon.html Normal file
View file

@ -0,0 +1,31 @@
<div class="figure-wrapper">
<figure aria-label="A list with three items and dividers separating each item. The first item has the Lit logo and the text Lit. The second item has the Polymer logo and the text Polymer. The third item has the Angular logo and the text Angular.">
<md-list style="max-width: 300px">
<md-list-item>
Lit
<svg slot="start" style="height: 24px" viewBox="0 0 160 200">
<path
fill="currentColor"
d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z"
/>
</svg>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
Polymer
<md-icon slot="start">polymer</md-icon>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
Angular
<svg slot="start" style="height: 24px" viewBox="0 0 250 250">
<polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 " />
<path
d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0
l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"
/>
</svg>
</md-list-item>
</md-list>
</figure>
</div>

22
components-wiki/figures/list/usage-image.html Normal file
View file

@ -0,0 +1,22 @@
<div class="figure-wrapper">
<figure
aria-label="A list with three image items. The first item is a square picture of a cat and the text Cat. The second is a picture of a kitten with the text Kitty Cat. The third item is a square image of an older kitten with the text Cate."
>
<md-list style="max-width: 300px">
<md-list-item>
Cat
<img slot="start" style="width: 56px" src="https://placekitten.com/112/112" />
</md-list-item>
<md-divider></md-divider>
<md-list-item>
Kitty Cat
<img slot="start" style="width: 56px" src="https://placekitten.com/114/114" />
</md-list-item>
<md-divider></md-divider>
<md-list-item>
Cate
<img slot="start" style="width: 56px" src="https://placekitten.com/116/116" />
</md-list-item>
</md-list>
</figure>
</div>

30
components-wiki/figures/list/usage.html Normal file
View file

@ -0,0 +1,30 @@
<div class="figure-wrapper">
<figure
aria-label="Three items in a list. The first item says Apple as its headline. The second one says Banana in its headline as well as Banana is a yellow fruit as its sub header. The third list item says Cucumber in its headline and Cucumbers are long green fruits that are just as long as this multi-line description as its sub header which is on two lines."
>
<md-list style="max-width: 300px;">
<md-list-item>
Fruits
</md-list-item>
<md-divider></md-divider>
<md-list-item>
Apple
</md-list-item>
<md-list-item>
Banana
</md-list-item>
<md-list-item>
<div slot="headline">Cucumber</div>
<div slot="supporting-text">Cucumbers are long green fruits that are just as long as this multi-line description</div>
</md-list-item>
<md-list-item
interactive
href="https://google.com/search?q=buy+kiwis&tbm=shop"
target="_blank">
<div slot="headline">Shop for Kiwis</div>
<div slot="supporting-text">This will link you out in a new tab</div>
<md-icon slot="end">open_in_new</md-icon>
</md-list-item>
</md-list>
</figure>
</div>

50
components-wiki/figures/menu/theming.html Normal file
View 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
View 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
View 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
View 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
View 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
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>

28
components-wiki/figures/select/theming-filled.html Normal file
View file

@ -0,0 +1,28 @@
<div class="figure-wrapper">
<figure
class="styled-example filled"
title="Filled select theming example"
aria-label="Image of a filled select with a different theme applied"
>
<style>
.styled-example.filled {
--md-filled-select-text-field-container-shape: 0px;
--md-filled-select-text-field-container-color: #f7faf9;
--md-filled-select-text-field-input-text-color: #005353;
--md-filled-select-text-field-input-text-font: system-ui;
}
.styled-example.filled md-filled-select::part(menu) {
--md-menu-container-color: #f4fbfa;
--md-menu-container-shape: 0px;
}
</style>
<md-filled-select>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="tomato">
<div slot="headline">Tomato</div>
</md-select-option>
</md-filled-select>
</figure>
</div>

34
components-wiki/figures/select/theming-outlined.html Normal file
View file

@ -0,0 +1,34 @@
<div class="figure-wrapper">
<figure
class="styled-example outlined"
title="Outlined select theming example"
aria-label="Image of an outlined select with a different theme applied"
>
<style>
.figure-wrapper figure {
padding-block: 16px;
}
.styled-example {
background-color: #f4fbfa;
}
.styled-example.outlined {
--md-outlined-select-text-field-outline-color: #6e7979;
--md-outlined-select-text-field-container-shape: 0px;
--md-outlined-select-text-field-input-text-color: #005353;
--md-outlined-select-text-field-input-text-font: system-ui;
}
.styled-example.outlined md-outlined-select::part(menu) {
--md-menu-container-color: #f4fbfa;
--md-menu-container-shape: 0px;
}
</style>
<md-outlined-select>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="tomato">
<div slot="headline">Tomato</div>
</md-select-option>
</md-outlined-select>
</figure>
</div>

34
components-wiki/figures/select/usage.html Normal file
View file

@ -0,0 +1,34 @@
<div class="figure-wrapper">
<style>
main > .figure-wrapper {
/* prevent scrolling bars on dropdown menu open */
overflow: visible;
/* unset page styles */
--md-list-item-container-shape: 0px;
}
</style>
<figure
style="justify-content: center; gap: 8px"
title="Example usage of an outlined dropdown menu and a filled dropdown menu."
aria-label="An outlined dropdown menu filled with Apple, and a filled dropdown menu."
>
<md-outlined-select>
<md-select-option aria-label="blank"></md-select-option>
<md-select-option selected value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="apricot">
<div slot="headline">Apricot</div>
</md-select-option>
</md-outlined-select>
<md-filled-select>
<md-select-option aria-label="blank"></md-select-option>
<md-select-option value="apple">
<div slot="headline">Apple</div>
</md-select-option>
<md-select-option value="apricot">
<div slot="headline">Apricot</div>
</md-select-option>
</md-filled-select>
</figure>
</div>

22
components-wiki/figures/textfield/theming-filled.html Normal file
View file

@ -0,0 +1,22 @@
<div class="figure-wrapper">
<style>
figure.themed {
background-color: #f4fbfa;
}
figure.themed.filled {
--md-filled-text-field-container-shape: 0px;
--md-sys-typescale-body-large: 400 1rem system-ui;
--md-sys-color-primary: #006a6a;
--md-sys-color-surface-container-highest: #e0e3e2;
--md-filled-text-field-label-text-color: #3f4948;
--md-filled-text-field-input-text-color: #161d1d;
}
</style>
<figure
class="themed filled"
aria-label="A filled text field with the label filled themed to a greenish color"
style="padding-block: 16px; gap: 16px"
>
<md-filled-text-field label="Filled" value="Value"> </md-filled-text-field>
</figure>
</div>

18
components-wiki/figures/textfield/theming-outlined.html Normal file
View file

@ -0,0 +1,18 @@
<div class="figure-wrapper">
<style>
figure.themed.outlined {
--md-outlined-text-field-container-shape: 0px;
--md-sys-typescale-body-large: 400 1rem system-ui;
--md-sys-color-primary: #006a6a;
--md-outlined-text-field-label-text-color: #3f4948;
--md-outlined-text-field-input-text-color: #161d1d;
}
</style>
<figure
class="themed outlined"
aria-label="An outlined text field with the label outlined themed to a greenish color"
style="padding-block: 16px; gap: 16px"
>
<md-outlined-text-field label="Outlined" value="Value"></md-outlined-text-field>
</figure>
</div>

8
components-wiki/figures/textfield/usage-char-counter.html Normal file
View file

@ -0,0 +1,8 @@
<div class="figure-wrapper">
<figure
aria-label="An outlined textfield with a floating label that says Title and a filled value that says Short and the text 5 / 10 under the field at the end"
style="padding-block: 16px; gap: 16px"
>
<md-outlined-text-field label="Title" value="Short" maxlength="10"></md-outlined-text-field>
</figure>
</div>

19
components-wiki/figures/textfield/usage-icons.html Normal file
View file

@ -0,0 +1,19 @@
<div class="figure-wrapper">
<figure
aria-label="Three outlined textfields next to each other the first has a search icon at the start the label Search Messages, the second a label that says Password and an eye icon toggle button at the end, and a red, visually errored outlined textfield with the label Username with an exclamation icon at the end and helper error text under the field that says Username not available"
style="padding-block: 16px; gap: 16px"
>
<md-outlined-text-field placeholder="Search for messages" has-leading-icon>
<md-icon slot="leading-icon">search</md-icon>
</md-outlined-text-field>
<md-outlined-text-field label="Password" type="password" has-trailing-icon>
<md-icon-button toggle slot="trailing-icon">
<md-icon>visibility</md-icon>
<md-icon slot="selected">visibility_off</md-icon>
</md-icon-button>
</md-outlined-text-field>
<md-outlined-text-field label="Username" error error-text="Username not available" has-trailing-icon>
<md-icon slot="trailing-icon">error</md-icon>
</md-outlined-text-field>
</figure>
</div>

11
components-wiki/figures/textfield/usage-label.html Normal file
View file

@ -0,0 +1,11 @@
<div class="figure-wrapper">
<figure
aria-label="Three outlined textfields next to each other. the first has a label of Favorite food, the second one a placeholder of email@domain.com and there is a label that says First name and an empty outlined textfield next to it"
style="padding-block: 16px; gap: 16px"
>
<md-outlined-text-field label="Favorite food"></md-outlined-text-field>
<md-outlined-text-field placeholder="email@domain.com"></md-outlined-text-field>
<div>First name</div>
<md-outlined-text-field aria-label="First name"></md-outlined-text-field>
</figure>
</div>

14
components-wiki/figures/textfield/usage-prefix.html Normal file
View file

@ -0,0 +1,14 @@
<div class="figure-wrapper textarea">
<figure
aria-label="An outlined textfield with a floating label that says Dollar amount, a prefix dollar sign, the number zero as a value and a suffix of decimal zero zero at the end of the field"
style="padding-block: 16px; gap: 16px"
>
<md-outlined-text-field
label="Dollar amount"
type="number"
value="0"
prefix-text="$"
suffix-text=".00"
></md-outlined-text-field>
</figure>
</div>

17
components-wiki/figures/textfield/usage-supporting-text.html Normal file
View file

@ -0,0 +1,17 @@
<div class="figure-wrapper">
<figure
aria-label="Two filled fields next to each other. The first has a label that says comments and supporting text under the field that says Provide comments for the issue. The second field has a label of Name with an asterisk and supporting text under the field that has an asterisk followed by the word required"
style="padding-block: 16px; gap: 16px"
>
<md-filled-text-field
label="Comments"
supporting-text="Provide comments for the issue"
></md-filled-text-field>
<md-filled-text-field
label="Name"
required
supporting-text="*required"
error-text="Please fill out this field"
></md-filled-text-field>
</figure>
</div>

13
components-wiki/figures/textfield/usage-textarea.html Normal file
View file

@ -0,0 +1,13 @@
<div class="figure-wrapper textarea">
<figure
aria-label="A filled textarea that is vertically larger and has a label that says Vertical resize"
style="padding-block: 16px; gap: 16px"
>
<style>
.figure-wrapper.textarea md-filled-text-field {
resize: vertical;
}
</style>
<md-filled-text-field type="textarea" label="Vertical resize" rows="3"></md-filled-text-field>
</figure>
</div>

9
components-wiki/figures/textfield/usage-type.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="Two filled textfields next to each other. The first has a label of Username and the outlined one has a label of Password"
style="padding-block: 16px; gap: 16px"
>
<md-filled-text-field label="Username" type="email"></md-filled-text-field>
<md-filled-text-field label="Password" type="password"></md-filled-text-field>
</figure>
</div>

9
components-wiki/figures/textfield/usage.html Normal file
View file

@ -0,0 +1,9 @@
<div class="figure-wrapper">
<figure
aria-label="A filled textfield next to an outlined textfield. Both have a value of Value prefilled"
style="padding-block: 16px; gap: 16px"
>
<md-filled-text-field label="Label" value="Value"></md-filled-text-field>
<md-outlined-text-field label="Label" value="Value"></md-outlined-text-field>
</figure>
</div>