Struktur
<lk-checkbox>
<label>
<input>
<span>
<slot/>
</span>
</input>
</label>
(p/)
</lk-banner>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid | string | "" | <input> sin id= |
| input-name | string | "" | <input> sin name= |
| error-message | string | "" | Tekst til <p> |
| label | string | "" | Tekst til <input> sin <span> |
| value | string | "" | <input> sin value= |
| required | boolean | false | <input> sin required= |
| disabled | boolean | false | <input> sin disabled= |
| checked | boolean | "" | <input> sin checked= |
| small | boolean | "" | Legger til "checkbox--small" i <input> sin class= |
| input-class | string | "checkbox--trigger" | Legges til i <input> sin class= |
| label-class | string | "checkbox__label" | Legges til i <span> sin class= |
| dependant-element dependant-id dependant-guid dependant-class |
string | "" | Ref. "betinget visning av felter" |
| show-dependant-if-checked hide-dependant-if-checked |
boolean | "" | Ref. "betinget visning av felter" |
| select-handler | callback(event):function | () => {} | Blir kalt i <input> sin onChange= |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert inni <span>. Tilsvarer label= |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate | () | valid:boolean | |
| getSelected | () | checked:boolean |
Eventer
Ref. Stenciljs.com
| Event | Parameter | Beskrivelse |
|---|---|---|
| componentSelected | (event) | Blir kalt i <input> sin onChange=. Tilsvarer select-handler= |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<lk-checkbox>Jeg bekrefter ditten og datten</lk-checkbox>