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 |
| appearance | "rounded" | "" | Ekspander innholdet ved innlasting |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| head | Dette innholdet vises alltid |
| body | Innhold under head |
| 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.
Type og toggle eksempel
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
Body slot eksempel og appearence rounded
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<h3>Type og toggle eksempel</h3>
<lk-banner banner-type="danger">
<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" 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">
<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">
<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>
<h3>Body slot eksempel og appearence rounded</h3>
<lk-banner banner-type="done" appearance="rounded">
<div slot="head">Head lorem ipsum</div>
<div slot="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</lk-banner>
<lk-banner banner-type="warning" appearance="rounded">
<div slot="head"><b>Head lorem ipsum</b></div>
<div slot="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</lk-banner>