Fritekstfelt Fritekstfelt-input.

Struktur

<lk-textarea-block>
  <label>
    (lk-help-text)
      (slot name="help-text"/)
    (/lk-help-text)
  </label>
  <slot/>
  <textarea/>
  (p/)
</lk-textarea-block>

Attributter

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

Attributt Tillatte verdier Default Beskrivelse
guid string "" <textarea> sin id= og <label> sin for=
input-name string "" <textarea> sin name=
label string "" <label> sin tekst
placeholder string "" <textarea> sin placeholder=
error-message string ""
required boolean false <textarea> sin required=
disabled boolean false <textarea> sin disabled=
min-length number "" <textarea> sin min-length=
max-length number "" <textarea> sin max-length=
rows number "" <textarea> sin rows=
value string ""
checkbox boolean false Use a checkbox (The checkbox can disables the textarea)
checkboxSmall boolean false Use a small checkbox
checkboxLabel string "Ikke tilgjengelig "
checkboxValue string "" The checkbox input value
reset boolean false Brukes internt av komponenten
initial-valid boolean true Brukes internt av komponenten

Spalter

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

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert mellom <label> og <textarea>
help-text Plassrres inni <label>

Metoder

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

Metode Parameter Retur Beskrivelse
validate
checkValidity		 () valid:boolean
getValue () value:string <textarea> sin .value
setValue (newValue:string) newValue:string Setter <textarea> sin .value
setFocus () null Kaller .focus() på <textarea>

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Det må foreligge særlige grunner til å utsette oppmålingsforretningen jf. matrikkellova § 6 Hvorfor skal du utsette oppmålingen?

Kort beskrivelse av skoleveien eller omstendighetene som kan gi rett til skoleskyss. Dersom barnet har delt bosted og beskrivelsen kun gjelder fra en av adressene må dette beskrives.

 
<lk-textarea-block
    max-length="15000"
    guid="free"
    input-name="free"
    initial-valid='true'
    label="Her kan du skrive så mye du vil"
    placeholder="Lorem ipsum dolor sit amet"
    recommended-min-length="10"
    checkbox="true"
    value="warn"
    required
></lk-textarea-block>

<lk-textarea-block 
    guid='reason' 
    class=""
    input-name='reason'
    placeholder='Begrunnelse for søknad'
    max-length='4000'
    error-message='Du må oppgi en gyldig begrunnelse.'
    required>
    <p class='paragraph link-out' slot="label">
        Det må foreligge særlige grunner til å utsette oppmålingsforretningen jf. 
        <a href='https://lovdata.no/lov/2005-06-17-101/§6' title='Lov om eigedomsregistrering (matrikkellova)' target='_blank' class='link-out'>
            matrikkellova § 6
        </a>Hvorfor skal du utsette oppmålingen?
    </p>
</lk-textarea-block>

<lk-textarea-block
    guid='descriptionOfNeeds'
    initial-valid='false'
    input-name='descriptionOfNeeds'
    placeholder='F.eks. Skoleveien krysser en motorvei...'
    label='Utdyp hvorfor barnet trenger skoleskyss'
    class='add-required'
    error-message='Du må oppgi hvorfor barnet trenger skoleskyss.'
    required>
    <div slot='help-text'>
        <p>Kort beskrivelse av skoleveien eller omstendighetene som kan gi rett til skoleskyss. Dersom barnet har delt bosted og beskrivelsen kun gjelder fra en av adressene må dette beskrives.</p> 
    </div>
</lk-textarea-block>

Utility klasser

.textarea-block--large

default


<h2 id="util">Utility klasser</h2>

<h3>.textarea-block--large</h3>
<lk-textarea-block
        guid='shortExample'
        initial-valid='false'
        input-name='shortName'
        placeholder='F.eks. En kort text med beskrivelse'
        label='Skriv en kort tekst om hva som helst'
        class='textarea-block--large'
        error-message='Du må oppgi hvorfor barnet trenger skoleskyss.'
        required
></lk-textarea-block>

<h3>default</h3>
<lk-textarea-block
        guid='shortExample'
        initial-valid='false'
        input-name='shortName'
        placeholder='F.eks. En kort text med beskrivelse'
        label='Skriv en kort tekst om hva som helst'
        error-message='Du må oppgi hvorfor barnet trenger skoleskyss.'
        required
></lk-textarea-block>

Hvor finner jeg denne koden?