nve-button

Selveste NVE-knappen. Bruk href for å gjøre den om til en link. Disse feltene skal ikke brukes:caret og pill Circle attributte skal brukes kun når man viser bare et ikon.

Arvet fra SlButton.

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

 

<nve-button>NVE-knappen</nve-button>

Eksempler

Varianter

Bruk variant for å velge farge. default er standard. success og warning skal ikke brukes. Vi bruker heller ikke outline-attributt, men neutral-variant

<nve-button variant="primary">primary</nve-button>
<nve-button>default</nve-button>
<nve-button variant="neutral">neutral</nve-button>
<nve-button variant="text">text</nve-button>
<nve-button variant="danger">danger</nve-button>

Størrelse

Bruk size for å endre størrelse. large er standard.

<nve-button size="small">small</nve-button>
<nve-button>medium</nve-button>
<nve-button size="large">large</nve-button>

Disabled

Bruk disabled for å deaktivere knappen.

<nve-button disabled>deaktivert</nve-button> <nve-button>ikke deaktivert</nve-button>

Prefix spor

Bruk prefix spor for å vise noe foran knapp teksten, f.eks et ikon.

<nve-button size="small"><nve-icon slot="prefix" name="warning"></nve-icon>Varsel</nve-button>
<nve-button><nve-icon slot="prefix" name="warning"></nve-icon>Varsel</nve-button>
<nve-button size="large"><nve-icon slot="prefix" name="warning"></nve-icon>Varsel</nve-button>

Suffix spor

Bruk suffix spor for å vise noe etter knapp teksten, f.eks et ikon.

<nve-button><nve-icon slot="suffix" name="thumb_up"></nve-icon>Bra</nve-button>

Loading

Bruk loading for å legge til ei snurre. Klikk for å slå av og på loading

<nve-button loading onclick="this.loading = !this.loading">loading</nve-button>

Kun ikon

Knapper med kun ikon kan brukes ved å sette nve-icon i standardsporet.

<nve-button size="large" variant="primary"><nve-icon name="warning"></nve-icon></nve-button>
<nve-button><nve-icon name="warning"></nve-icon></nve-button>
<nve-button size="small" variant="neutral"><nve-icon name="warning"></nve-icon></nve-button>

Man kan fortsatt bruke loading attributtet for å vise kun spinner.

<nve-button loading size="medium" variant="primary" onclick="this.loading = !this.loading">
  <nve-icon name="warning"></nve-icon>
</nve-button>

Knapper med bare ikon kan også bruke attributtet circle for å vise en rund knapp.

<nve-button circle variant="neutral" size="large"><nve-icon name="more_vert"></nve-button>
<nve-button circle><nve-icon name="more_vert"></nve-button>
<nve-button circle size="small" variant="text"><nve-icon name="more_vert"></nve-icon></nve-button>

Ikon farge

I noen tilfeller må man sette en annen farge på ikonet. Dette kan enkelt gjøres ved å sette --nve-icon-color CSS-egenskapen.

<nve-button size="medium" variant="neutral" style="--nve-icon-color: red"
  ><nve-icon name="warning"></nve-icon
></nve-button>

Spor

Navn	Beskrivelse
(standard)	The button's label.
prefix	A presentational prefix icon or similar element.
suffix	A presentational suffix icon or similar element.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-blur	SlButton	Emitted when the button loses focus.
sl-focus	SlButton	Emitted when the button gains focus.
sl-invalid	SlButton	Emitted when the form control has been checked for validity and its constraints aren't satisfied.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
size	'small' | 'medium' | 'large' = 'medium'
testId	string | undefined = undefined
formControlController	= new FormControlController(this, { assumeInteractionOn: ['click'] })	SlButton
hasSlotController	= new HasSlotController(this, '[default]', 'prefix', 'suffix')	SlButton
localize	= new LocalizeController(this)	SlButton
button	HTMLButtonElement | HTMLLinkElement	SlButton
hasFocus	boolean = false	SlButton
invalid	boolean = false	SlButton
title	string = ''	SlButton
variant	'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'default'	SlButton	The button's theme variant.
caret	boolean = false	SlButton	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.
disabled	boolean = false	SlButton	Disables the button.
loading	boolean = false	SlButton	Draws the button in a loading state.
outline	boolean = false	SlButton	Draws an outlined button.
pill	boolean = false	SlButton	Draws a pill-style button with rounded edges.
circle	boolean = false	SlButton	Draws a circular icon button. When this attribute is present, the button expects a single `<sl-icon>` in the default slot.
type	'button' | 'submit' | 'reset' = 'button'	SlButton	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
name	string = ''	SlButton	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter. This attribute is ignored when `href` is present.
value	string = ''	SlButton	The value of the button, submitted as a pair with the button's name as part of the form data, but only when this button is the submitter. This attribute is ignored when `href` is present.
href	string = ''	SlButton	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
target	'_blank' | '_parent' | '_self' | '_top'	SlButton	Tells the browser where to open the link. Only used when `href` is present.
rel	string = 'noreferrer noopener'	SlButton	When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.
download	string | undefined	SlButton	Tells the browser to download the linked file as this filename. Only used when `href` is present.
form	string	SlButton	The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.
formAction	string	SlButton	Used to override the form owner's `action` attribute.
formEnctype	'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'	SlButton	Used to override the form owner's `enctype` attribute.
formMethod	'post' | 'get'	SlButton	Used to override the form owner's `method` attribute.
formNoValidate	boolean	SlButton	Used to override the form owner's `novalidate` attribute.
formTarget	'_self' | '_blank' | '_parent' | '_top' | string	SlButton	Used to override the form owner's `target` attribute.
validity		SlButton	Gets the validity state object
validationMessage		SlButton	Gets the validation message

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleDisabledChange			SlButton
click			SlButton	Simulates a click on the button.
focus	options: FocusOptions		SlButton	Sets focus on the button.
blur			SlButton	Removes focus from the button.
checkValidity			SlButton	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
getForm		HTMLFormElement | null	SlButton	Gets the associated form, if one exists.
reportValidity			SlButton	Checks for validity and shows the browser's validation message if the control is invalid.
setCustomValidity	message: string		SlButton	Sets a custom validation message. Pass an empty string to restore validity.

Deler

Navn	Beskrivelse
base	The component's base wrapper.
prefix	The container that wraps the prefix.
label	The button's label.
suffix	The container that wraps the suffix.
caret	The button's caret icon, an `<sl-icon>` element.
spinner	The spinner that shows when the button is in the loading state.