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>