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>

Spor

Navn	Beskrivelse
(standard)	The menu item's label.
prefix	Used to prepend an icon or similar element to the menu item.
suffix	Used to append an icon or similar element to the menu item.
submenu	Used to denote a nested 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
defaultSlot	HTMLSlotElement	SlMenuItem
menuItem	HTMLElement	SlMenuItem
type	'normal' | 'checkbox' = 'normal'	SlMenuItem	The type of menu item to render. To use `checked`, this value must be set to `checkbox`.
checked	boolean = false	SlMenuItem	Draws the item in a checked state.
value	string = ''	SlMenuItem	A unique value to store in the menu item. This can be used as a way to identify menu items when selected.
loading	boolean = false	SlMenuItem	Draws the menu item in a loading state.
disabled	boolean = false	SlMenuItem	Draws the menu item in a disabled state, preventing selection.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleCheckedChange			SlMenuItem
handleDisabledChange			SlMenuItem
handleTypeChange			SlMenuItem
getTextLabel			SlMenuItem	Returns a text label based on the contents of the menu item's default slot.
isSubmenu			SlMenuItem

Deler

Navn	Beskrivelse
base	The component's base wrapper.
checked-icon	The checked icon, which is only visible when the menu item is checked.
prefix	The prefix container.
label	The menu item label.
suffix	The suffix container.
spinner	The spinner that shows when the menu item is in the loading state.
spinner__base	The spinner's base part.
submenu-icon	The submenu icon, visible only when the menu item has a submenu (not yet implemented).

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--submenu-offset	The distance submenus shift to overlap the parent menu.