Fritekstfelt | Fleetwood designsystem

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-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
label	string
description	string
data-size	sm, md, lg
required	boolean
disabled	boolean
readonly	boolean
max-length	number
error-message	string

Slot	Skru av/på slot
checkbox

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
description	string	""	Tekst under `<label>` i `<p>`
placeholder	string	""	`<textarea>` sin `placeholder=`
error-message	string	""
required	boolean	false	`<textarea>` sin `required=`
readonly	boolean	false	`<textarea>` sin `readonly=`
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)
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>`
label	Tekst inni `<label>`
description	Tekst under `<label>` inni `<p>`
checkbox	Checkbox som deaktiverer komponenten
~~help-text~~	Deprecated ikke lengre i bruk Plasserres inni `<label>`

Metoder

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

Metode	Parameter	Retur	Beskrivelse
validate checkValidity	()	valid:boolean
changeValidity	(boolean)	null	Endrer om tekst feltet er gyldig (valid)
getValue	()	value:string	`<textarea>` sin `.value`
setValue	(newValue:string)	newValue:string	Setter `<textarea>` sin `.value`
setFocus	()	null	Kaller `.focus()` på `<textarea>`

Eksempler

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.

Vis kode

<lk-textarea-block
    max-length="15000"
    guid="free"
    input-name="free"
    initial-valid='true'
    label="Her kan du skrive så mye du vil"
    error-message="Ikke gyldig"
    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

Vis kode


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