Melding blokk lk-message
Melding blokk.
webcomponent
Melding med overskrift
Åpne lenke
Vis kode
<lk-message>
    <div slot="header">
        Melding med overskrift
    </div>
    <div slot="action">
        <lk-button data-variant="secondary">Åpne lenke</lk-button>
    </div>
</lk-message>

Attributter

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

Attributt Tillatte verdier Default Beskrivelse
openText string "Åpne"
closeText string "Lukk"
open boolean false Åpner og lukker lk-message.
toggle boolean false Legger til muligheten for å åpne eller lukke
type string "message" "invoice", "task", "message".
Sets the different header icons
read boolean false Viser lk-message som om den har vært åpnet før eller ikke.

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">
action Plasseres inni <div class="message__header__action">

Eksempler

Melding 2 med flere ikoner

Mottatt: 20.02.2020

hello

Her kommer innhold med forskjellige handlinger

Download
Melding so var lest

Mottatt: 20.02.2020

hello

Faktura med faktura ikon

Mottatt: 20.02.2020

Fyll ut rapport
Å betale
2390,-
Kontonummer
224.435.353.4234
KID nummer
530306043905694305999
Download
Vis kode
<lk-message toggle type="message">
    <div slot="header">
        Melding 2 med flere ikoner
        <p class="message__date">Mottatt: 20.02.2020</p>
    </div>
    <h2 class="lk-heading" data-size="md">hello</h2>
    <p>Her kommer innhold med forskjellige handlinger</p>
    <a href="#">Download</a>
</lk-message>

<lk-message read toggle> 
    <div slot="header">Melding so var lest
      <p class="message__date">Mottatt: 20.02.2020</p> 
    </div>
    <h2 class="lk-heading" data-size="md">hello</h2>
</lk-message>

<lk-message type="task" read>
    <div slot="header">
        Faktura med faktura ikon
        <p class="message__date">Mottatt: 20.02.2020</p>
    </div>

    <div slot="action">
        <lk-button data-variant="secondary">Fyll ut rapport</lk-button>
    </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>
    <a href="#">Download</a>
</lk-message>