Usage
<ed-micro label="Awesome micro-content">
## My micro content
It has been proven that is better to chunk content to faciliate memorization.
## Split content
Ok.
</ed-micro>
If no label is provided it will use first child as label.
<ed-micro>
## My micro content
It has been proven that is better to chunk content to faciliate memorization.
## Split content
Ok.
</ed-micro>
Each header is used as delimiter for slide separation, but you can also add
horizontal rules.
<ed-micro>
## My micro content
It has been proven that is better to chunk content to faciliate memorization.
---
This content is in its own slide.
## Split content
Ok.
</ed-micro>
You can use another ed-components inside ed-micro component.
<ed-micro>
## Let's test
<ed-pb>
> This is a note. Who'd have noted?
1. Each numeric element list is turned into a question.
You can provide some context
1. Subquestion 2.1.
A gfm task-list with _one checked answer_ will be turned into a **single choice question**.
- [ ] first false answer
- [x] This is true
1. Subquestion 2.2.
A gfm task-list with _more than one checked answer_ will be turned into a **multiple choice question**.
- [ ] first false answer
- [x] This is true
- [x] This is also true
- [ ] false also
</ed-pb>
---
This content is in its own slide.
## Split content
Ok.
</ed-micro>
References
API
Generated with @custom-elements-manifest
ed-micro/src/EdMicro.ts:
class: EdMicroElement
Superclass
| Name |
Module |
Package |
HTMLElement |
|
|
Static Methods
| Name |
Privacy |
Description |
Parameters |
Return |
Inherited From |
define |
|
|
tagName |
|
|
Fields
| Name |
Privacy |
Type |
Default |
Description |
Inherited From |
isHTML |
|
|
|
|
|
label |
|
|
|
|
|
innerHTML |
|
|
`` ` <style> |
|
|
:host {
display: block; --ed-primary: var(--blue-7, #1c7ed6);
}
html:has(dialog[open][modal-mode="mega"]) {
overflow: hidden;
}
dialog {
display: grid;
align-content: start;
background: var(--surface-2);
color: var(--text-1);
max-inline-size: min(90vw, var(--size-content-3));
margin: auto;
padding: 0;
position: fixed;
inset: 0;
border-radius: var(--radius-3);
box-shadow: var(--shadow-6);
z-index: var(--layer-important);
overflow: hidden;
transition: opacity .5s var(--ease-3);
@media (--motionOK) {
animation: var(--animation-scale-down) forwards;
animation-timing-function: var(--ease-squish-3);
}
@media (--OSdark) {
border-block-start: var(--border-size-1) solid var(--surface-3);
}
@media (--md-n-below) {
&[modal-mode="mega"] {
margin-block-end: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
@media (--motionOK) {
animation: var(--animation-slide-out-down) forwards;
animation-timing-function: var(--ease-squish-2);
}
}
}
&:not([open]) {
pointer-events: none;
opacity: 0;
}
&[modal-mode="mega"]::backdrop {
backdrop-filter: blur(25px);
}
&[modal-mode="mini"]::backdrop {
backdrop-filter: none;
}
&::backdrop {
transition: backdrop-filter .5s ease;
}
&[loading] {
visibility: hidden;
}
&[open] {
@media (--motionOK) {
animation: var(--animation-slide-in-up) forwards;
}
}
& > form {
display: grid;
grid-template-rows: auto 1fr auto;
align-items: start;
max-block-size: 80vh;
max-block-size: 80dvb;
& > article {
overflow-y: auto;
max-block-size: 100%; /* safari */
overscroll-behavior-y: contain;
display: grid;
justify-items: flex-start;
gap: var(--size-3);
box-shadow: var(--shadow-2);
z-index: var(--layer-1);
padding-inline: var(--size-5);
padding-block: var(--size-3);
@media (--OSlight) {
background: var(--surface-1);
&::-webkit-scrollbar {
background: var(--surface-1);
}
}
@media (--OSdark) {
border-block-start: var(--border-size-1) solid var(--surface-3);
}
}
& > header {
display: flex;
gap: var(--size-3);
justify-content: space-between;
align-items: flex-start;
padding-block: var(--size-3);
padding-inline: var(--size-5);
& > button {
border-radius: var(--radius-round);
padding: .75ch;
aspect-ratio: 1;
flex-shrink: 0;
place-items: center;
stroke: currentColor;
stroke-width: 3px;
}
}
& > footer {
display: flex;
flex-wrap: wrap;
gap: var(--size-3);
justify-content: space-between;
align-items: flex-start;
padding-inline: var(--size-5);
padding-block: var(--size-3);
& > menu {
display: flex;
flex-wrap: wrap;
gap: var(--size-3);
padding-inline-start: 0;
&:only-child {
margin-inline-start: auto;
}
@media (max-width: 410px) {
& button[type="reset"] {
display: none;
}
}
}
}
& > :is(header, footer) {
background-color: var(--surface-2);
@media (--OSdark) {
background-color: var(--surface-1);
}
}
svg { --_icon-size: var(--size-fluid-3);
block-size: var(--_icon-size);
filter: drop-shadow(var(--_ink-shadow));
flex-shrink: 0;
inline-size: var(--_icon-size);
stroke: currentColor;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
header {background-color: var(--surface-1);}
/* slider part*/ #slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
} #slides::-webkit-scrollbar {
width: 10px;
height: 10px;
} #slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
} #slides::-webkit-scrollbar-track {
background: transparent;
} #slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100%;
height: 100%;
padding: 1.3em;
border-radius: 10px;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slide {
flex: 0 0 95%;
}
.carousel-arrow {
position: absolute;
display: flex;
justify-content: center;
top: 0;
bottom: 64px;
margin-block: auto;
height: fit-content;
width: 48px;
background-color: white;
border: none;
font-size: 3rem;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 100ms;
}
.carousel-arrow:hover,
.carousel-arrow:focus {
opacity: 1;
}
.carousel-arrow--prev {
left: 0;
}
.carousel-arrow--next {
right: 0;
} </style> <dialog id="MegaDialog" modal-mode="mega"> <form method="dialog"> <header> <h3 id="label">µLearning</h3>
<button onclick="this.closest('dialog').close('close')" type="button" title="Close dialog"> <title>Close dialog icon</title> <svg width="24" height="24" viewBox="0 0 24 24"> <line x1="18" y1="6" x2="6" y2="18"/> <line x1="6" y1="6" x2="18" y2="18"/> </svg> </button> </header> <article id="slides"></article> </form> </dialog> <section id="open-label">
Open micro-learning content
${microSvg} </section> ` `` | | |
Methods
| Name |
Privacy |
Description |
Parameters |
Return |
Inherited From |
_handleCarouselMove |
private |
|
evt |
|
|
_updateLabel |
private |
|
label |
|
|
Attributes
| Name |
Field |
Inherited From |
label |
|
|
isHTML |
|
|
<hr/>