nve-dropdown

TODO: Beskrivelse mangler

Arvet fra SlDropdown.

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

For nedtrekksliste/"rullgardin"/dropdown-list, bruk nve-select

html

<nve-dropdown>
  <nve-button variant="primary" slot="trigger">
    <nve-icon name="expand_more" slot="suffix"></nve-icon>
    Dropdown
  </nve-button>
  <nve-menu>
    <nve-menu-item>Normal tekst</nve-menu-item>
    <nve-menu-item subtext="Dette er en undertekst">Tekst</nve-menu-item>
    <nve-menu-item>
      <nve-checkbox>Checkbox</nve-checkbox>
    </nve-menu-item>
    <nve-divider></nve-divider>
    <nve-menu-item>Normal tekst</nve-menu-item>
    <nve-menu-item indent="">Undertittel</nve-menu-item>
    <nve-label value="Kategori 1"> </nve-label>
    <nve-menu-item -=""
      >Submenu
      <nve-menu slot="submenu">
        <nve-menu-item>Tekst 2</nve-menu-item>
        <nve-menu-item>Tekst 3</nve-menu-item>
        <nve-menu-item>Tekst 4</nve-menu-item>
      </nve-menu>
    </nve-menu-item>
    <nve-menu-item dividertop="">Divider top</nve-menu-item>
    <nve-menu-item disabled="">Disabled</nve-menu-item>
    <nve-label value="Kategori 2" iconleft="" iconcolor="black">
      <div slot="tooltip">Hjelpetekst kan være veldig lang <strong>HTML</strong></div>
    </nve-label>
    <nve-menu-item dividerbottom="">Divider bottom</nve-menu-item>
    <nve-menu-item><nve-icon slot="prefix" name="info"></nve-icon>Ikon</nve-menu-item>
  </nve-menu>
</nve-dropdown>

Spor

Navn	Beskrivelse
(standard)	The dropdown's main content.
trigger	The dropdown's trigger, usually a `<sl-button>` element.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-show	SlDropdown	Emitted when the dropdown opens.
sl-after-show	SlDropdown	Emitted after the dropdown opens and all animations are complete.
sl-hide	SlDropdown	Emitted when the dropdown closes.
sl-after-hide	SlDropdown	Emitted after the dropdown closes and all animations are complete.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse
testId	string = ''
handlePanelSelect
popup	SlPopup	SlDropdown
trigger	HTMLSlotElement	SlDropdown
panel	HTMLSlotElement	SlDropdown
open	boolean = false	SlDropdown	Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
placement	\| 'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'right' \| 'right-start' \| 'right-end' \| 'left' \| 'left-start' \| 'left-end' = 'bottom-start'	SlDropdown	The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside of the viewport.
disabled	boolean = false	SlDropdown	Disables the dropdown so the panel will not open.
stayOpenOnSelect	boolean = false	SlDropdown	By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for dropdowns that allow for multiple interactions.
containingElement	HTMLElement \| undefined	SlDropdown	The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other components that use a dropdown internally.
distance	number = 0	SlDropdown	The distance in pixels from which to offset the panel away from its trigger.
skidding	number = 0	SlDropdown	The distance in pixels from which to offset the panel along its trigger.
hoist	boolean = false	SlDropdown	Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
sync	'width' \| 'height' \| 'both' \| undefined = undefined	SlDropdown	Syncs the popup width or height to that of the trigger element.

Metoder

Navn	Parametre	Arvet fra	Beskrivelse
getMenu
updateAccessibleTrigger
focusOnTrigger		SlDropdown
handleTriggerClick		SlDropdown
handleTriggerKeyDown	event: KeyboardEvent	SlDropdown
handleTriggerKeyUp	event: KeyboardEvent	SlDropdown
handleTriggerSlotChange		SlDropdown
show		SlDropdown	Shows the dropdown panel.
hide		SlDropdown	Hides the dropdown panel
reposition		SlDropdown	Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu is activated.
addOpenListeners		SlDropdown
removeOpenListeners		SlDropdown
handleOpenChange		SlDropdown

Deler

Navn	Beskrivelse
base	The component's base wrapper, an `<sl-popup>` element.
base__popup	The popup's exported `popup` part. Use this to target the tooltip's popup container.
trigger	The container that wraps the trigger.
panel	The panel that gets shown when the dropdown is open.

nve-dropdown

Feil / oppgaver / PR ​

Spor ​

Hendelser ​

Egenskaper ​