nve-textarea

Skal brukes til å lage lang tekstfelt. Min høyde er satt opp til --sizing-2x-small. De fleste attributer som brukes på vanlig textarea burde bli støttet her. Hvis det er noe som mangler, bare å legge til. Man kan bruke label og tooltip attributer for å vise label over textarea. Samt med helpText. Trenger ikke noe eksta slots per i dag. Trengs ikke å lage separate slots for det. Siden vi skulle bruke ikoner inn i textarea var det enklere å lage vår egen komponent enn å leke med sl-textarea Validering. Siden textarea ikke er shoelace komponent, constraint valdiering skal ikke fungere så bra med andre shoelace komponenter i formen. Shoelace wrapper alle sine form komponenter i en form kontroll som gjør at alle blir validert samtidig når man bruker constraint validering. Det er ikke en default nettlesersen oppførsel. Submit event stopper på den første feil den møter i formen. Per i dag siden vi blander både shoelace komponenter og våre egne våre komponeter skal bli diskriminert i gruppe validering. Derfor anbefales det å bruke custom validering på textarea med setCustomValidation.

Arvet fra LitElement

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-textarea.

 

<nve-textarea label="Her kan du skrive akkurat hva du vil"></nve-textarea>

Eksempler

Ledetekst

En ledetekst kan legges til på to måter. Ved å bruke label-egenskapen – enklest når du kun trenger tekst eller ved å bruke label-sporet – som gir mer fleksibilitet, f.eks. hvis du vil inkludere HTML eller egne komponenter sammen med teksten.

<nve-textarea>
  <nve-label value="Ledeteksten spor" slot="label">
    <nve-spinner slot="suffix"></nve-spinner>
  </nve-label>
</nve-textarea>

<nve-textarea label="Ledetekst egenskap"></nve-textarea>

Mørk bakgrunn

Bruk filled for mørk bakgrunnsfarge

<nve-textarea value="filled" filled></nve-textarea>

<nve-textarea value="ikke filled"></nve-textarea>

Verktøyhint

Bruk label og tooltip for å vise ledetekst med verktøyhint

<nve-textarea label="Svev over ikonet" tooltip="Hjelpetekst"> </nve-textarea>

Deaktivering

Bruk disabled for å deaktivere feltet. Låse-ikon vises automatisk.

<nve-textarea value="aktiv"></nve-textarea>

<nve-textarea disabled value="deaktivert"></nve-textarea>

Skrivebeskyttet

Bruk readonly for å stenge mulighet for å endre innholdet

<nve-textarea readonly value="Dette får du ikke endret"></nve-textarea>

<nve-textarea value="men dette kan du endre"></nve-textarea>

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.

<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
  <nve-textarea label="Hva synes du?" required errorMessage="Her må du skrive noe"></nve-textarea>

  <nve-textarea
    label="What do you think?"
    required
    requiredLabel="*Required"
    errorMessage="Please answer"
  ></nve-textarea>

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

Validering av lengde

I tillegg til required støtter vi minLength og maxLength for å validere lengden på innholdet. Pass på at du setter en feilmelding i errorMessage. Feltet må ligge i en <form> for at validering skal funke.

<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
  <nve-textarea
    required
    minlength="3"
    maxLength="5"
    label="Minimum 3 og maks 5 tegn"
    errorMessage="Mellom 3 og 5 tegn her, takk"
  ></nve-textarea>
  <nve-textarea
    filled
    required
    minlength="3"
    maxLength="5"
    label="Minimum 3 og maks 5 tegn"
    errorMessage="Mellom 3 og 5 tegn her, takk"
  ></nve-textarea>
  <nve-button type="submit" variant="primary">Submit</nve-button>
</form>

Antall rader

Bruk rows for å velge høyde. Standard er to rader

<nve-textarea rows="5" value="5 rader"></nve-textarea>

<nve-textarea value="2 rader"></nve-textarea>

Hendelser

Navn	Arvet fra	Beskrivelse
eventName
sl-blur		trigges når textarea mister fokus
sl-change		trigges når textarea endrer verdi
sl-input		trigges når textarea endrer verdi
sl-invalid		trigges når textarea er invalid

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
name	string = ''		Navnet på tekstområdet, sendt som et navn/verdi-par med skjemadata
value	string = ''		Textarea verdi, sendt som et navn/verdi-par med skjemadata
errorMessage	string | undefined		Feil melding som vises under gruppe hvis validering feiler
title	string = ''
filled	boolean = false		Viser filled variant
label	string = ''		Label tekst
helpText	string = ''		Hjelpetekst under textarea
disabled	boolean = false		Om textarea er deaktivert
readonly	boolean = false		Om textarea er skrivebeskyttet
placeholder	string = ''		Placeholder tekst
required	boolean = false		Om textarea er obligatorisk
requiredLabel	string = '*Obligatorisk'		Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.
minlength	number | undefined		Den minste lengden på inndata som vil bli betraktet som gyldig.
maxlength	number | undefined		Maksimal lengde på inndata som vil bli betraktet som gyldig.
autocapitalize	'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' = 'off'		Kontrollerer om og hvordan tekstinnput automatisk blir gjort stor som det blir skrevet inn av brukeren.
autocorrect	string | undefined		Indikerer om nettleserens autokorrekturfunksjon er på eller av.
tooltip	string | undefined		Indikerer om nettleserens autokorrekturfunksjon er på eller av.
testId	string = ''		Brukes for å kunne identifisere komponenten i tester
inputmode	'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | undefined		Forteller nettleseren hvilken type data som vil bli skrevet inn av brukeren, slik at den kan vise det passende virtuelle tastaturet på støttede enheter.
rows	number | undefined		Antall rader med tekst i textarea-taggen. Browser-default dersom denne ikke er satt er 2 i alle browsere Bestemmer initiell høyde på textarea-boksen (settes slik at antall rader * font-høyde får plass)
input	HTMLTextAreaElement		Hoved input felt i nve-textarea komponentet. Brukes til constraint validering

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
setCustomValidity	message:

Deler

Navn	Beskrivelse
form-control	hoved komponent sitt container
textarea-label	label og requiredLabel container
base	textarea og ikone container
help-text-container	container for hjelpetekst