Struktur
<lk-checkbox-group>
<fieldset>
<legend/>
(div)
(legend/)
(lk-help-text)
(slot name="help-text" /)
(lk-help-text)
(/div)
<slot/>
[
<label>
<input/>
<span/>
(input/)
</label>
]
(p/)
</fieldset>
</lk-checkbox-group>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid* guid-list |
string array:string |
""guid+checkbox-labels |
<label> sine for= og <input> sine id= (evt. prefiks ved bruk av guid=);og evt. <fieldset> sin id=) |
| group-name names |
string array:string |
"" | <input> sine name= |
| group-label | string | "" | Tekst til <legend> |
| checkbox-labels | array:string | "" | Tekster til <input> sine <span> |
| error-message | string | "" | Tekst til <p> |
| values | array:string | checkbox-labels |
<input> sine value= |
| required | boolean | false | <input> sine required= |
| disabled | boolean | false | <input> sine disabled= |
| hidden-field-names | array:string | "" | Legger til en <input type="hidden" name="{hidden-field-names[i]}"> for hver checkbox |
| group-class | string | "" | Legges til i <legend> sin class= |
| checked-values | array:string | "" | |
| checked-guid-list | array:string | "" | |
| small | boolean | "" | Legger til "checkbox--small" i <label> sine 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" |
| show-dependant-if-blank hide-dependant-if-blank |
boolean | false | Ref. "betinget visning av felter" |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert rett etter <legend> inni <fieldset> |
| help-text | Blir plassert rett etter <legend> inni en <div class="title-with-helptext-wrapper"> |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate | () | valid:boolean | |
| getChecked | (attr:string = "value") | array | |
| checkValue | (value:string) | null | |
| uncheckValue | (value:string) | null | |
| checkItems | (guidList:JSON-array-string) | null | |
| uncheckItems | (guidList:JSON-array-string) | null | |
| adjustDependants | () | Viser/skjuler det som komponenten skal styre |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
Vises, eller ikke vises. Det er spørsmålet!
Kort beskrivelse...
Vises, eller ikke vises. Det er spørsmålet!
<lk-checkbox-group
guid="indepentantRadio1"
group-name='indepentantRadio1'
hidden-field-names='["indepentantRadio1[0].hidden", "indepentantRadio1[1].hidden", "indepentantRadio1[2].hidden"]'
group-label='Skal divven vises?'
checkbox-labels='["Ja","Jo kanskje","Nei"]'
dependant-id='dependantDiv1'
hide-dependant-if-value='Nei'
></lk-checkbox-group>
<div id="dependantDiv1" class="no-display background--tint-blue padding--medium">
<p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
<lk-input-block
guid="automagiskRequired1"
input-name="automagiskRequired1"
preset="personalid"
data-auto-required>
</lk-input-block>
</div>
<lk-checkbox-group
guid="indepentantRadio2"
group-name='indepentantRadio2'
group-label='Skal divven vises?'
checkbox-labels='["Ja","Neppe det","Nei"]'
dependant-id='dependantDiv2'
show-dependant-if-value='Ja'
>
<div slot='help-text'>
<p>Kort beskrivelse...</p>
</div>
</lk-checkbox-group>
<div id="dependantDiv2" class="background--tint-blue padding--medium">
<p>Vises, eller ikke vises. <b>Det</b> er spørsmålet!</p>
<lk-input-block
guid="automagiskRequired2"
input-name="automagiskRequired2"
preset="personalid"
required
data-auto-required>
</lk-input-block>
</div>