Modal En heldekkende modal med backdrop for å fremheve en handling brukeren må gjøre.

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>
  

Hvor finner jeg denne koden?