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>