nve-dropdown

TODO: Beskrivelse mangler

Arvet fra: SlDropdown

TIP

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

<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	Attributt-synk	Type	Standardverdi	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.

Metoder

Navn	Parametre	Returtype	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.
trigger	The container that wraps the trigger.
panel	The panel that gets shown when the dropdown is open.