Struktur
<lk-dual-listbox>
<div>
<label/>
<select>
[
<option/>
]
</select>
<div>
<button>
<span/>
<lk-icon/>
</button>
</div>
</div>
<div>
<label/>
<select>
[
<option>
<span/>
<span/>
<input/>
</option>
]
</select>
<div>
<button>
<span/>
</button>
<button>
<span/>
</button>
<button>
<span/>
</button>
</div>
</div>
<p/>
</lk-dual-listbox>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| guid* | string | "" | id= for interne elementer |
| group-name | string | "" | Høyre-valgene får en <inpyt type="hidden"> med name=group-name[] |
| left-label | string | "Tilgjengelige valg" | Tekst for venstre-valgenes <label>/heading |
| right-label | string | "Dine valg" | Tekst for høyre-valgenes <label>/heading |
| option-labels* | array:string | "" | Hver <option>/valg sin tekst |
| option-values | array:string | option-labels |
Hver <option>/valg, og evt. <inpyt type="hidden">, sine value |
| label-class | string | "" | Legger til label-class på begge <label>/heading sine class= |
| size | number | option-labels.length |
|
| required | boolean | "false" | |
| required-message | string | "Du må legge til minst et av de tilgjengelige valgene." | |
| disabled | boolean | "false" |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate | () | valid:boolean |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
<form>
<lk-dual-listbox
guid="choices"
group-name="choices"
values='[
"asak",
"frydenlund",
"garderaasen",
"skaaningsrud"
]'
left-label="Tilgjengelige undervisningstilbud"
right-label="Valgte undervisningstilbud"
option-labels='[
"Asak",
"Frydenlund",
"Garderåsen base 3",
"Skåningsrud"
]'
required
></lk-dual-listbox>
</form>