Banner Heldekkende banner med ulike bakgrunnsfarger til bruk som informasjonselement under portalheaderen.

Struktur

<lk-banner>
  <div>
    <div>
      <span>
        <svg>
          <...>
        </svg>
      </span>
      <div>
        <div>
          <slot name="head">
        </div>
        <div>
          <slot name="toggle body">
        </div>
      </div>
      <button>
        <span> 
          <svg> 
            <...>
          </svg> 
        </span> 
      </button>
    </div>
  </div>
</lk-banner>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
banner-type "blue"
"green"
"yellow"/"orange"
"pink"/"red"
"green" Også gyldig med done, yes, success, warning, red, danger
opened boolean false Ekspander innholdet ved innlasting
blinking-icon boolean false Blink-animasjon på ikonet
blinking-bold boolean false Blink-animasjon på all tekst som er hevet med <b> eller <strong>

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
head Dette innholdet vises alltid
toggle-body Dette innholdet kan vises/skjules

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
changeDisplayStatus (display:boolean) null Vise/skjule

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Fare: NVE har sendt ut flomvarsel som gjelder Nitelva og Leira

Advarsel: Vi har for tiden tekniske problemer med enkelte tjenester. Vi har for tiden tekniske problemer med enkelte tjenester. Vi har for tiden tekniske problemer med enkelte tjenester

Denne teksten kan åpne og lukkes

Melding: Noe har skjedd som du bør være glad for. Vi har også inkludert en lenke du kan trykke på.

Denne teksten kan åpne og lukkes

Denne teksten kan åpne og lukkes

Denne teksten kan åpne og lukkes

Melding: Noe har skjedd som du bør være glad for. Vi har også inkludert en lenke du kan trykke på.

Denne teksten kan åpne og lukkes

Denne teksten kan åpne og lukkes

Denne teksten kan åpne og lukkes

<lk-banner banner-type="danger" blinking-icon blinking-bold>
  <div slot="head"><p><strong>Fare:</strong> NVE har sendt ut flomvarsel som gjelder Nitelva og Leira</p></div>
  <div slot="toggle-body">
  </div>
</lk-banner>

<lk-banner banner-type="warning" blinking-icon blinking-bold opened>
  <div slot="head"><p><strong>Advarsel:</strong> Vi har for tiden tekniske problemer med enkelte tjenester. Vi har for tiden tekniske problemer med enkelte tjenester. Vi har for tiden tekniske problemer med enkelte tjenester</p></div>
  <div slot="toggle-body">
    <p>Denne teksten kan åpne og lukkes</p>
  </div>
</lk-banner>

<lk-banner banner-type="success" blinking-icon blinking-bold>
  <div slot="head"><p><strong>Melding:</strong> Noe har skjedd som du bør være glad for. <a href="#">Vi har også inkludert en lenke du kan trykke på.</a></p></div>
  <div slot="toggle-body">
    <p>Denne teksten kan åpne og lukkes</p>
    <p>Denne teksten kan åpne og lukkes</p>
    <p>Denne teksten kan åpne og lukkes</p>
  </div>
</lk-banner>

<lk-banner banner-type="done" blinking-icon blinking-bold>
  <div slot="head"><p><strong>Melding:</strong> Noe har skjedd som du bør være glad for. <a href="#">Vi har også inkludert en lenke du kan trykke på.</a></p></div>
  <div slot="toggle-body">
    <p>Denne teksten kan åpne og lukkes</p>
    <p>Denne teksten kan åpne og lukkes</p>
    <p>Denne teksten kan åpne og lukkes</p>
  </div>
</lk-banner>

Hvor finner jeg denne koden?