nve-select

En nedtrekksliste, også kjent som rullgardin eller drop-down list. Kjært barn har mange navn. TODO: Klarte ikke å sette feil-ikonet når validering feiler. Eneste måte å gjøre det på kunne ha vært å bruke ::after pseudo-element på noen av sl-select partene, men funka ikke med ikonet. Man kan bruke .focus() for å fokusere komponenten programatisk. Sjekk https://shoelace.style/getting-started/usage#methods for å se hvordan å bruke det. Kan være at i Vue applikasjon man må kjøre .focus i neste tick for å fokusere komponenten.

Arvet fra: SlSelect

<nve-select label="Ledetekst">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

Eksempler

Størrelse

Bruk size for å velge størrelse. small er standard.

<nve-select label="small">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

<nve-select label="medium" size="medium">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

<nve-select label="large" size="large">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

Obligatorisk

Bruk required for å tvinge bruker til å skrive noe og legg inn en feilmelding i errorMessage om du ikke vil ha standard-feilmeldinga. Bruk requiredlabel hvis du vil vise noe annet enn *Obligatorisk. Feltet må ligge i en <form> for at validering skal funke, og hver nve-option må ha en unik value.

<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
  <nve-select label="Hva synes du?" required errorMessage="Her må du velge noe">
    <nve-option value="alt1">Ja</nve-option>
    <nve-option value="alt2">Tja</nve-option>
    <nve-option value="alt3">Njaa</nve-option>
  </nve-select>

  <nve-select label="What do you think?" required requiredLabel="*Required" errorMessage="Please answer">
    <nve-option value="alt1">Oh, yes!</nve-option>
    <nve-option value="alt2">Yes, please</nve-option>
    <nve-option value="alt3">Not so much</nve-option>
  </nve-select>

  <nve-button type="submit">Submit</nve-button>
</form>

Spor

Navn	Beskrivelse
(standard)	The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
label	The input's label. Alternatively, you can use the `label` attribute.
prefix	Used to prepend a presentational icon or similar element to the combobox.
clear-icon	An icon to use in lieu of the default clear icon.
expand-icon	The icon to show when the control is expanded and collapsed. Rotates on open and close.
help-text	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-change	SlSelect	Emitted when the control's value changes.
sl-clear	SlSelect	Emitted when the control's value is cleared.
sl-input	SlSelect	Emitted when the control receives input.
sl-focus	SlSelect	Emitted when the control gains focus.
sl-blur	SlSelect	Emitted when the control loses focus.
sl-show	SlSelect	Emitted when the select's menu opens.
sl-after-show	SlSelect	Emitted after the select's menu opens and all animations are complete.
sl-hide	SlSelect	Emitted when the select's menu closes.
sl-after-hide	SlSelect	Emitted after the select's menu closes and all animations are complete.
sl-invalid	SlSelect	Emitted when the form control has been checked for validity and its constraints aren't satisfied.

Egenskaper

Navn	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
requiredLabel		string	'*Obligatorisk'		Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.
errorMessage		string | undefined			Brukes til enkel constraint validation til å overskrive default nettleseren melding
popup		SlPopup		SlSelect
combobox		HTMLSlotElement		SlSelect
displayInput		HTMLInputElement		SlSelect
valueInput		HTMLInputElement		SlSelect
listbox		HTMLSlotElement		SlSelect
displayLabel		string	''	SlSelect
currentOption		SlOption		SlSelect
selectedOptions		SlOption[]	[]	SlSelect
name		string	''	SlSelect	The name of the select, submitted as a name/value pair with form data.
value		string | string[]	''	SlSelect	The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the value attribute will be a space-delimited list of values based on the options selected, and the value property will be an array. **For this reason, values must not contain spaces.**
defaultValue		string | string[]	''	SlSelect	The default value of the form control. Primarily used for resetting the form control.
size		'small' | 'medium' | 'large'	'medium'	SlSelect	The select's size.
placeholder		string	''	SlSelect	Placeholder text to show as a hint when the select is empty.
multiple		boolean	false	SlSelect	Allows more than one option to be selected.
maxOptionsVisible		number	3	SlSelect	The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to indicate the number of additional items that are selected. Set to 0 to remove the limit.
disabled		boolean	false	SlSelect	Disables the select control.
clearable		boolean	false	SlSelect	Adds a clear button when the select is not empty.
open		boolean	false	SlSelect	Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
hoist		boolean	false	SlSelect	Enable this option to prevent the listbox 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.
filled		boolean	false	SlSelect	Draws a filled select.
pill		boolean	false	SlSelect	Draws a pill-style select with rounded edges.
label		string	''	SlSelect	The select's label. If you need to display HTML, use the `label` slot instead.
placement		'top' | 'bottom'	'bottom'	SlSelect	The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
helpText		string	''	SlSelect	The select's help text. If you need to display HTML, use the `help-text` slot instead.
form		string	''	SlSelect	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
required		boolean	false	SlSelect	The select's required attribute.
getTag		(option: SlOption, index: number) => TemplateResult | string | HTMLElement		SlSelect	A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second is the current tag's index. The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.
validity				SlSelect	Gets the validity state object
validationMessage				SlSelect	Gets the validation message
tags				SlSelect

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
firstUpdated	changedProperties: any
updated	changedProperties: any
focus
handleOptionClick	event: MouseEvent
handleDefaultSlotChange
getAllOptions
getFirstOption
handleDisabledChange			SlSelect
handleValueChange			SlSelect
handleOpenChange			SlSelect
show			SlSelect	Shows the listbox.
hide			SlSelect	Hides the listbox.
checkValidity			SlSelect	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
getForm		HTMLFormElement | null	SlSelect	Gets the associated form, if one exists.
reportValidity			SlSelect	Checks for validity and shows the browser's validation message if the control is invalid.
setCustomValidity	message: string		SlSelect	Sets a custom validation message. Pass an empty string to restore validity.
blur			SlSelect	Removes focus from the control.

Deler

Navn	Beskrivelse
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The select's wrapper.
form-control-help-text	The help text's wrapper.
combobox	The container the wraps the prefix, combobox, clear icon, and expand button.
prefix	The container that wraps the prefix slot.
display-input	The element that displays the selected option's label, an `<input>` element.
listbox	The listbox container where options are slotted.
tags	The container that houses option tags when `multiselect` is used.
tag	The individual tags that represent each multiselect option.
tag__base	The tag's base part.
tag__content	The tag's content part.
tag__remove-button	The tag's remove button.
tag__remove-button__base	The tag's remove button base part.
clear-button	The clear button.
expand-icon	The container that wraps the expand icon.