nve-alert

Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup

Arvet fra: SlAlert

<nve-alert open text="text"></nve-alert>

TIP

Bruk open for å vise en alert. Hvis ikke open er satt, vises den ikke.

Eksempler

Variant

Bruk variant for å styre farger. primary er standard og trenger ikke spesifiseres.

<nve-alert open>
  <nve-icon slot="icon" name="info"></nve-icon>
  primary
</nve-alert>

<nve-alert variant="success" open>
  <nve-icon slot="icon" name="check_circle"></nve-icon>
  success
</nve-alert>

<nve-alert variant="warning" open>
  <nve-icon slot="icon" name="warning"></nve-icon>
  warning
</nve-alert>

<nve-alert variant="neutral" open>
  <nve-icon slot="icon" name="help"></nve-icon>
  neutral
</nve-alert>

<nve-alert variant="danger" open>
  <nve-icon slot="icon" name="error"></nve-icon>
  danger
</nve-alert>

Left stroke

Bruk leftstroke for å vise en fet strek på venstre side.

<nve-alert variant="danger" text="Left stroke" leftstroke open> </nve-alert>

Emphasized

Bruk emphasized for å få litt mørkere bakgrunnsfarge.

<nve-alert variant="warning" text="Emphasized" emphasized open> </nve-alert>

<nve-alert variant="warning" text="Ikke emphasized" open> </nve-alert>

Tittel og tekst

Du kan bruke title for å lage en slags overskrift. Resten av teksten kan enten ligge i text eller inni elementet.

<nve-alert text="og tekst" title="Tittel" open></nve-alert>

<nve-alert title="Kun tittel" open></nve-alert>

<nve-alert text="kun tekst" open></nve-alert>

<nve-alert title="Tittel" text="og tekst" open>
  TODO: Tekst inni elementet burde nok hatt samme stil som text-egenskapen og kanskje man ikke burde kunne vise begge
  samtidig?
</nve-alert>

Closable

Bruk closable for å vise en lukke-knapp på høyre side, som skjuler komponenten.

TODO: Fikse lukke-scriptet

<nve-alert open closable class="alert-closeable"> Trykk på krysset for å lukke denne </nve-alert>

<script>
  // Denne snutten vil vise alert igjen etter 2 sekunder, slik at du kan prøve å lukke den flere ganger
  const alert = document.querySelector('.alert-closeable');
  alert.addEventListener('sl-after-hide', async () => {
    setTimeout(() => (alert.open = true), 2000);
  });
</script>

Ikoner

Ikoner legges i sporet icon.

<nve-alert open>
  <nve-icon slot="icon" name="check_circle"></nve-icon>
  med ikon
</nve-alert>
<nve-alert open> uten ikon </nve-alert>

Spor

Navn	Beskrivelse
(standard)	The alert's main content.
icon	An icon to show in the alert. Works best with `<sl-icon>`.

Hendelser

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

Egenskaper

Navn	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
title		string	''		Tykk tekst, vises helt til venstre
text		string	''		Tynnere beskrivelse tekst
emphasized		boolean	false		Bestemmer sterkere bakgrunnsfarge
leftStroke		boolean	false		Ramme linje til venstre
base		HTMLElement		SlAlert
open		boolean	false	SlAlert	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
closable		boolean	false	SlAlert	Enables a close button that allows the user to dismiss the alert.
variant		'primary' | 'success' | 'neutral' | 'warning' | 'danger'	'primary'	SlAlert	The alert's theme variant.
duration			Infinity	SlAlert	The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning the alert will not close on its own.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
updated	changedProperties: any
handleOpenChange			SlAlert
handleDurationChange			SlAlert
show			SlAlert	Shows the alert.
hide			SlAlert	Hides the alert
toast			SlAlert	Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden.

Deler

Navn	Beskrivelse
base	The component's base wrapper.
icon	The container that wraps the optional icon.
message	The container that wraps the alert's main content.
close-button	The close button, an `<sl-icon-button>`.
close-button__base	The close button's exported `base` part.