Struktur
<lk-radio-group>
<fieldset>
(div)
<legend/>
(lk-help-text)
(slot name="help-text" /)
(/lk-help-text)
(/div)
<slot/>
[
<label>
<input/>
<span/>
</label>
]
<p/>
</fieldset>
</lk-radio-group>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid* guid-list |
string array:string |
""guid+radio-labels |
Prefiks for <input> sine id=. Evt. <input> sine id= |
| group-name | string | "" | <input> sine name= |
| group-label | string | "" | Tekst til <leged> |
| radio-labels | array:string | "" | Tekster til <input>'s |
| error-message | string | "" | |
| required | boolean | false | <input> sine required= |
| disabled | boolean | false | <input> sine disabled= |
| values | array:string | radio-labels |
<input> sine values= |
| group-class | string | "" | <legend> sin class= |
| vertical-align | boolean | true | |
| checked-item | value:string | "" | |
| dependant-ids dependant-guids dependant-classes |
array:string | "" | |
| dependant-element | HTMLElement | "" | |
| dependant-id dependant-guid dependant-class |
string | "" | |
| show-dependant-if-value hide-dependant-if-value |
string | "" | |
| show-dependant-if-blank hide-dependant-if-blank |
boolean | false |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir plassert øverst inni <fieldset>. Kan brukes istede for group-label= |
| help-text | Plasseres rett etter <legend> i en <div> wrapper |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate | () | valid:boolean | |
| getChecked | (attr: string = "value") | attrValue:string | |
| uncheck | () | 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-radio-group
guid="indepentantRadio1"
group-name='indepentantRadio1'
group-label='Skal divven vises?'
radio-labels='["Ja","Jo kanskje","Nei"]'
dependant-id='dependantDiv1'
hide-dependant-if-value='Nei'
></lk-radio-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-radio-group
guid="indepentantRadio2"
group-name='indepentantRadio2'
group-label='Skal divven vises?'
radio-labels='["Ja","Neppe det","Nei"]'
dependant-id='dependantDiv2'
show-dependant-if-value='Ja'
>
<div slot='help-text'>
<p>Kort beskrivelse...</p>
</div>
</lk-radio-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>