Struktur
<lk-modal>
<div>
<div>
<h2>
<button/>
</div>
<div>
<slot/>
</div>
</div>
</lk-modal>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| modal-title | string | "" | Tekst for <h2> |
| is-open | boolean | false |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert inni <div class="modal__box__content"> |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| toggleModal | (event) | null | |
| openModal | () | null | |
| closeModal | () | null |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
Dette er innholdet i modalen. Her kan du legge alt du ønsker av HTML og innhold.
<script>
function openModal() {
document.getElementById('my-modal').openModal();
}
</script>
<button class="button button--normal" onclick="openModal()">
<span class="button__text">Åpne modalen</span>
</button>
<lk-modal modal-title="Dette er en modal" is-open="false" id="my-modal">
<p>
Dette er innholdet i modalen. Her kan du legge alt du ønsker av HTML og innhold.
</p>
</lk-modal>
<script>
function openModalSec() {
document.getElementById('my-modal-sec').openModal();
}
</script>
<button class="button button--normal" onclick="openModalSec()">
<span class="button__text">Åpne modalen</span>
</button>
<lk-modal modal-title="Dette er en modal" is-open="false" id="my-modal-sec">
<div style="height: 150vh;"></div>
</lk-modal>