nve-menu-item

Bruk denne til å lage valg i en nve-menu. Property "loading" støttes foreløpig ikke.

Arvet fra SlMenuItem.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-menu-item.

 

<nve-menu>
  <nve-menu-item>Hummer</nve-menu-item>
  <nve-menu-item>Kanari</nve-menu-item>
</nve-menu>

Eksempler

Bruk nve-divider for skille menyvalg. Se eksempel på hvordan du kan lage under-menyer i sida for nve-menu.

Ikoner

Putt et nve-icon i sporet prefix eller suffix inni nve-menu-item for å vise et ikon foran eller bak menyvalget. Du kan også bruke nve-badge inni et menyvalg.

<!-- vi setter maks-bredde for at menyen ikke skal fylle hele bredden på boksen -->
<nve-menu style="max-width: 240px;">
  <nve-menu-item
    >Med ikon foran
    <nve-icon slot="prefix" name="favorite"></nve-icon>
  </nve-menu-item>
  <nve-menu-item
    >Med ikon bak
    <nve-icon slot="suffix" name="favorite"></nve-icon>
  </nve-menu-item>
  <nve-menu-item
    >Med ikon foran og bak
    <nve-icon slot="prefix" name="favorite"></nve-icon>
    <nve-icon slot="suffix" name="favorite"></nve-icon>
  </nve-menu-item>
  <nve-menu-item
    >Med badge
    <nve-badge slot="suffix">42</nve-badge>
  </nve-menu-item>
</nve-menu>

Deaktivering

Bruk disabled for å deaktivere et menyvalg.

<nve-menu>
  <nve-menu-item disabled>Hummer</nve-menu-item>
  <nve-menu-item>Kanari</nve-menu-item>
</nve-menu>

Av/på

Bruk type="checkbox" for å markere at menyvalget kan skrus av og på. Om valget er "på" er checked satt.

<nve-menu>
  <nve-menu-item type="checkbox">Valg 1</nve-menu-item>
  <nve-menu-item type="checkbox" checked>Valg 2</nve-menu-item>
  <nve-menu-item>Valg 3</nve-menu-item>
</nve-menu>

Å vite hvilket menyvalg som ble valgt

Bruk value for å gi menyvalget en unik ID. Du kan lese av value til aktuelt menyvalg i event.detail.item i sl-select-hendelsen når noe velges.

<nve-menu class="menu-value">
  <nve-menu-item value="opt-1">Option 1</nve-menu-item>
  <nve-menu-item value="opt-2">Option 2</nve-menu-item>
  <nve-menu-item value="opt-3">Option 3</nve-menu-item>
  <nve-divider></nve-divider>
  <nve-menu-item type="checkbox" value="opt-4">Checkbox 4</nve-menu-item>
  <nve-menu-item type="checkbox" value="opt-5">Checkbox 5</nve-menu-item>
  <nve-menu-item type="checkbox" value="opt-6">Checkbox 6</nve-menu-item>
</nve-menu>

<script>
  const menu = document.querySelector('.menu-value');

  menu.addEventListener('sl-select', (event) => {
    const item = event.detail.item;

    if (item.type === 'checkbox') {
      console.log(`Valgt verdi: ${item.value} (${item.checked ? 'checked' : 'unchecked'})`);
    } else {
      console.log(`Valgt verdi: ${item.value}`);
    }
  });
</script>

Undertekst

Bruk subtext for å lage en undertekst til et menyvalg.

<nve-menu>
  <nve-menu-item subtext="Et ettertraket skalldyr">Hummer</nve-menu-item>
  <nve-menu-item>Kanari</nve-menu-item>
</nve-menu>

Innrykk

Bruk indent for å lage et "under-menyvalg".

<nve-menu>
  <nve-menu-item>Vanlig menyvalg</nve-menu-item>
  <nve-menu-item indent>Under-menyvalg</nve-menu-item>
</nve-menu>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
subtext	string = ''		Gi menyvalget en egen undertekst.
indent	boolean = false		Gjør at teksten får innrykk og en svakere farge
handleMouseOver