nve-select

En nedtrekksliste, også kjent som rullgardin eller drop-down list. Kjært barn har mange navn. TODO: Klarte ikke å sette feil-ikonet når validering feiler. Eneste måte å gjøre det på kunne ha vært å bruke ::after pseudo-element på noen av sl-select partene, men funka ikke med ikonet. Man kan bruke .focus() for å fokusere komponenten programatisk. Sjekk https://shoelace.style/getting-started/usage#methods for å se hvordan å bruke det. Kan være at i Vue applikasjon man må kjøre .focus i neste tick for å fokusere komponenten.

Arvet fra SlSelect

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-select.

 

Se også nve-option

<nve-select label="Ledetekst">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

Eksempler

Hente eller sette verdi

Bruk value for å hente valgt verdi eller velge noe på forhånd.

<nve-select value="valg2" label="Endre denne hvis du ikke vil ha foreslått valg">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Mørk bakgrunn

Bruk filled for mørk bakgrunnsfarge

<nve-select value="filled" filled>
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Flervalg

Bruk multiple for å tillate valg av flere verdier. Bruk clearable for å gjøre det enkelt å fjerne valgene.

<nve-select multiple clearable label="Her kan du velge flere">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

Bruk value for å velge noe på forhånd. I html skilles valgene med mellomrom, så da kan ikke bruke mellomrom i nve-option sin value. I Javascript vil value være en tabell i stedet, så da er ikke mellomrom noen utfordring.

<nve-select multiple clearable value="valg1 valg2" label="Her kan du velge flere">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Bruk max-options-visible for å begrense hvor mange valg du vil vise.

Størrelse

Bruk size for å velge størrelse. small er standard.

<nve-select label="small" size="small">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

<nve-select label="medium" size="medium">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

<nve-select label="large" size="large">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

Obligatorisk

Bruk required for å tvinge bruker til å skrive noe og legg inn en feilmelding i errorMessage om du ikke vil ha standard-feilmeldinga. Bruk requiredlabel hvis du vil vise noe annet enn *Obligatorisk. Feltet må ligge i en <form> for at validering skal funke, og hver nve-option må ha en unik value.

<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
  <nve-select label="Hva synes du?" required errorMessage="Her må du velge noe">
    <nve-option value="alt1">Ja</nve-option>
    <nve-option value="alt2">Tja</nve-option>
    <nve-option value="alt3">Njaa</nve-option>
  </nve-select>

  <nve-select label="What do you think?" required requiredLabel="*Required" errorMessage="Please answer">
    <nve-option value="alt1">Oh, yes!</nve-option>
    <nve-option value="alt2">Yes, please</nve-option>
    <nve-option value="alt3">Not so much</nve-option>
  </nve-select>

  <nve-button type="submit">Submit</nve-button>
</form>

Bruk ulik tekst for select og option

Bruk textLabel i nve-option dersom du ønsker at teksten som vises i selve select-feltet ikke skal være all teksten som er i option.

<nve-select value="valg2" label="Endre denne hvis du ikke vil ha foreslått valg" multiple>
  <nve-option value="valg1" textLabel="Valg 1">
    <span>Valg 1</span> - <span>Denne teksten vil ikke vises når denne er valgt</span>
  </nve-option>
  <nve-option value="valg2"><span>Valg 2</span> - <span>Denne teksten blir med når den er valgt</span></nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Markering av valgte elementer

Valgte elementer får et ikon for markering i dropdown. Dette kan slås av med hide-checkmark på både vanlig og flervalg-variantene

<nve-select multiple clearable hide-checkmark value="valg1 valg2" label="Her kan du velge flere">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

<nve-select value="valg2" hide-checkmark label="Her kan du velge kun én">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
requiredLabel	= '*Obligatorisk'		Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.
hideCheckmark	boolean = false		Settes dersom man ikke ønsker å ha checkmark på valgte options i dropdown
errorMessage	string		Brukes til enkel constraint validation til å overskrive default nettleser-melding

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
focus