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>