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 | "" | |
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.
<lk-textarea-block
guid="free"
input-name="free"
label="Her kan du skrive så mye du vil"
placeholder="Lorem ipsum dolor sit amet"
></lk-textarea-block>