Struktur
<lk-message>
...
</lk-message>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| openText | string | "Åpne" | |
| closeText | string | "Lukk" | |
| type | string | "message" | |
| read | boolean | false | |
| (background) | string | "" |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert inni <div class="message__body__text"> |
| header | Plasseres inni <div class="message__header__content"> |
| bodyicon | Plasseres inni <div class="message__body__icon"> |
| footericon | Plasseres inni <div class="message__footer__icon"> |
| footer | Plasseres inni <div class="message__footer__text"> |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
Melding 2 med flere ikoner
Mottatt: 20.02.2020
hello
Her kommer innhold med forskjellige handlinger
Melding so var lest
Mottatt: 20.02.2020
hello
Faktura med faktura ikon
Mottatt: 20.02.2020
- Å betale
- 2390,-
- Kontonummer
- 224.435.353.4234
- KID nummer
- 530306043905694305999
<lk-message>
<div slot="header">
Melding 2 med flere ikoner
<p class="message__date">Mottatt: 20.02.2020</p>
</div>
<h2>hello</h2>
<p>Her kommer innhold med forskjellige handlinger</p>
<div slot="bodyicon">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" height="24" width="24">
<g transform="matrix(1,0,0,1,0,0)">
<path
d="M 5.25,8.925c2.485,0,4.5,2.015,4.5,4.5s-2.015,4.5-4.5,4.5s-4.5-2.015-4.5-4.5S2.765,8.925,5.25,8.925z "
stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
</path>
<path d="M 0.75,7.424c0.887-0.667,1.912-1.128,3-1.349 " stroke="currentColor" fill="none"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M 23.25,7.424c-0.887-0.667-1.912-1.128-3-1.349 " stroke="currentColor" fill="none"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path
d="M 18.75,8.925 c2.485,0,4.5,2.015,4.5,4.5s-2.015,4.5-4.5,4.5s-4.5-2.015-4.5-4.5S16.265,8.925,18.75,8.925z "
stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
</path>
<path d="M 9.75,13.425h4.5" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
</g>
</svg>
</div>
<div slot="footer"><a href="#">Download</a> </div>
<div slot="footericon">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"
height="24" width="24">
<g transform="matrix(1,0,0,1,0,0)">
<path d="M 12.001,3.75v12 " stroke="#000000" fill="none" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M 7.501,11.25l4.5,4.5l4.5-4.5 " stroke="#000000" fill="none" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M 23.251,15.75v1.5c0,1.657-1.343,3-3,3h-16.5 c-1.657,0-3-1.343-3-3v-1.5" stroke="#000000"
fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</div>
</lk-message>
<lk-message read>
<div slot="header">Melding so var lest
<p class="message__date">Mottatt: 20.02.2020</p>
</div>
<h2>hello</h2>
</lk-message>
<lk-message type="faktura">
<div slot="header">
Faktura med faktura ikon
<p class="message__date">Mottatt: 20.02.2020</p>
</div>
<dl class="message__faktura-details">
<dd>Å betale</dd>
<dt>2390,-</dt>
<dd>Kontonummer</dd>
<dt>224.435.353.4234</dt>
<dd> KID nummer</dd>
<dt>530306043905694305999</dt>
</dl>
<div slot="footer"><a href="#">Download</a></div>
<div slot="footericon">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"
height="24" width="24">
<g transform="matrix(1,0,0,1,0,0)">
<path d="M 12.001,3.75v12 " stroke="#000000" fill="none" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M 7.501,11.25l4.5,4.5l4.5-4.5 " stroke="#000000" fill="none" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M 23.251,15.75v1.5c0,1.657-1.343,3-3,3h-16.5 c-1.657,0-3-1.343-3-3v-1.5" stroke="#000000"
fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</div>
</lk-message>