Flervalgsliste To listebokser med prioritering.

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

<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>