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.

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

 

Se også nve-option

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

Eksempler

Hente eller sette verdi

Bruk value for å hente valgt verdi eller velge noe på forhånd.

<nve-select value="valg2" label="Endre denne hvis du ikke vil ha foreslått valg">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Mørk bakgrunn

Bruk filled for mørk bakgrunnsfarge

<nve-select value="filled" filled>
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Flervalg

Bruk multiple for å tillate valg av flere verdier. Bruk clearable for å gjøre det enkelt å fjerne valgene.

<nve-select multiple clearable label="Her kan du velge flere">
  <nve-option value="valg1">Hummer</nve-option>
  <nve-option value="valg2">Kanari</nve-option>
</nve-select>

Bruk value for å velge noe på forhånd. I html skilles valgene med mellomrom, så da kan ikke bruke mellomrom i nve-option sin value. I Javascript vil value være en tabell i stedet, så da er ikke mellomrom noen utfordring.

<nve-select multiple clearable value="valg1 valg2" label="Her kan du velge flere">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Bruk max-options-visible for å begrense hvor mange valg du vil vise.

Størrelse

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

<nve-select label="small" size="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>

Bruk ulik tekst for select og option

Bruk textLabel i nve-option dersom du ønsker at teksten som vises i selve select-feltet ikke skal være all teksten som er i option.

<nve-select value="valg2" label="Endre denne hvis du ikke vil ha foreslått valg" multiple>
  <nve-option value="valg1" textLabel="Valg 1">
    <span>Valg 1</span> - <span>Denne teksten vil ikke vises når denne er valgt</span>
  </nve-option>
  <nve-option value="valg2"><span>Valg 2</span> - <span>Denne teksten blir med når den er valgt</span></nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

Markering av valgte elementer

Valgte elementer får et ikon for markering i dropdown. Dette kan slås av med hide-checkmark på både vanlig og flervalg-variantene

<nve-select multiple clearable hide-checkmark value="valg1 valg2" label="Her kan du velge flere">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

<nve-select value="valg2" hide-checkmark label="Her kan du velge kun én">
  <nve-option value="valg1">Valg 1</nve-option>
  <nve-option value="valg2">Valg 2</nve-option>
  <nve-option value="valg3">Valg 3</nve-option>
</nve-select>

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.
suffix	Used to append 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	Type	Arvet fra	Beskrivelse	Reflected
requiredLabel	string = '*Obligatorisk'		Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.
hideCheckmark	boolean = false		Settes dersom man ikke ønsker å ha checkmark på valgte options i dropdown
errorMessage	string | undefined		Brukes til enkel constraint validation til å overskrive default nettleser-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		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

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
focus	options: FocusOptions		SlSelect	Sets focus on the control.
handleDefaultSlotChange			SlSelect
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, suffix, combobox, clear icon, and expand button.
prefix	The container that wraps the prefix slot.
suffix	The container that wraps the suffix 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.