Melding blokk | Fleetwood designsystem

Komponenter

depentant-attrs lk-anchor-group lk-badge lk-banner lk-bil lk-breadcrumbs lk-button lk-button-link lk-card lk-carousel lk-checkbox lk-checkbox-group lk-cloner lk-details lk-divider lk-dual-listbox lk-error-summary lk-file-uploader lk-filter lk-icon lk-input-block lk-message lk-modal lk-page-header lk-pagination lk-radio-group lk-search lk-select-block lk-show-more lk-spinner lk-tag lk-textarea-block lk-to-top Portalheader Portalsøk Seksjonsintro Side footer Skip-link Søkeresultater Tabeller

Mindre brukte

Aksjonsheader Aksjonsknapp Ansattsøkeresultater Arrangementsliste Artikkelliste Beskrivelsesliste Brukerinfo Coverbilde Fanenavigering Fremhevet artikkel Kalenderhendelser Knappevelger Kontaktseksjon Ledige stillinger lk-cloud-map lk-cover-image lk-feedback lk-figure lk-map Magasinsidetopp no-opener no-referral Overskrift med ikon Uthevet blokk Uthevet liste

Eksperimentell

lk-feedback-form lk-file-upload lk-iframe lk-stepper lk-suggestion

Avviklet

Alarmsignal Ankerlenker Badge Banner Brødsmuler Definere ikoner Ekstern lenke iframe Ikonliste Interaktive skjema elementer Knappegruppe Knapper lk-beep-test lk-details lk-flood-status lk-google-maps lk-google-maps-tile lk-help-text lk-rating lk-read-text lk-select-util lk-show-details lk-site-footer lk-site-header Melding Sidetopp Skjemaelementer Sosiale medier Tidslinje Varselboks

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>