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

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

Eksempler

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-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	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
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)
showErrorMessage		boolean	false		Bestemmer om feilmelding skal vises når validering feiler
touched		boolean	false		Om bruker starter å skrive noe i textarea
input		HTMLTextAreaElement			Hoved input felt i nve-textarea komponentet. Brukes til constraint validering
resizeObserver		ResizeObserver | null	null

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
firstUpdated
emit	eventName: string
handleSubmit	e: SubmitEvent
handleBlur
handleChange
handleInput
checkValidity				Sjekker constraint validation og hvis man kjørte setCustomValidity med en melding, checkValidity blir falsk og. Hvis man ikke bruker errorMessage property vil den vise default engelsk tekst istedenfor
setCustomValidity	message:
makeInvalid
resetValidation
toggleValidationAttributes	isValid: boolean			Toggler riktig validering attribute for å vise riktig style
render

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