Select-block lk-select-block
select-block.

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-modal lk-page-header lk-pagination lk-radio-group lk-search lk-select-block 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 lk-message Magasinsidetopp no-opener no-referral Overskrift med ikon Uthevet blokk Uthevet liste Eksperimentell lk-feedback-form lk-file-upload lk-iframe 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-show-more lk-site-footer lk-site-header lk-tab-panel Melding Sidetopp Skjemaelementer Sosiale medier Tidslinje Varselboks
webcomponent designsystemet
Navn Type Verdi
string
string
sm, md, lg
boolean
boolean
boolean
string
full, auto />
Slot Skru av/på slot

Attributter

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

Attributt Tillatte verdier Default Beskrivelse
guid string "" Unik identifikator for select-elementet
inputName string "" Navn-attributt for select-elementet
label string "" Tekst for label
description string "" Tekst under label
errorMessage string "" Feilmelding som vises ved ugyldig input
options Array [] Liste over valg (option-objekter)
required boolean false Om feltet er obligatorisk
readonly boolean false Om feltet ikke er redigerbart
data-size sm, md, lg "" Bytter størrelsen på elementet og elementer under
data-width full, auto "" Setter full bredde eller størrelsen til innholdet
dependant-ids
dependant-guids
dependant-classes		 array:string "" Ref. "betinget visning av felter"
dependant-element HTMLElement "" Ref. "betinget visning av felter"
dependant-id
dependant-guid
dependant-class		 string "" Ref. "betinget visning av felter"
show-dependant-if-value
hide-dependant-if-value		 string "" Ref. "betinget visning av felter"
show-dependant-if-blank
hide-dependant-if-blank		 boolean false Ref. "betinget visning av felter"

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot-navn Beskrivelse
(default) Elementer uten slot-attributt blir plassert etter <select> (kun shell)
label Ekstra innhold i label
description Plasseres under label elementet
checkobx Checkbox som deaktiverer komponenten
sub-label Bruk description Plasseres under label, over select
error-message Ekstra innhold i feilmelding

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
validate () valid:boolean Validerer feltet og returnerer gyldighet
getValidity () valid:boolean Returnerer nåværende gyldighetsstatus
getValue () value:string Returnerer nåværende valgt verdi
setValue name void Setter nåværende valgt verdi. name er navnet på valget

Eventer

Ref. Stenciljs.com

Event Parameter Beskrivelse
selectValueChange (event) Utløses når valgt verdi endres

Eksempler

Kontakt oss hvis du får denne feilen.
Vis kode 
<lk-select-block
  guid="advanced-select"
  inputName="advanced"
  label="Standard label"
  description="Standard beskrivelse"
  errorMessage="Standard feilmelding"
  required="true"
  options='[{"value":"x","label":"X"},{"value":"y","label":"Y"}]'
  dependant-classes='["showDependantOptionX","showDependantOptionY"]'>
  <span slot="error-message">Kontakt oss hvis du får denne feilen.</span>
</lk-select-block>