nve-alert

Brukes til å vise viktige beskjeder enten på en side eller som en enkel popup. Hvis du trenger å vise en statisk varsling med mer informasjon, kan det hende at nve-message-card er et bedre valg.

Arvet fra SlAlert.

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

 

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

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>

Høyere metning

Bruk saturation="emphasized" for å få litt mørkere bakgrunnsfarge.

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem">
  <nve-alert variant="warning" text="Emphasized" saturation="emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert variant="warning" text="Ikke emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert variant="success" text="Emphasized" saturation="emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert variant="success" text="Ikke emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert variant="neutral" text="Emphasized" saturation="emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert variant="neutral" text="Ikke emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert variant="danger" text="Emphasized" saturation="emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert variant="danger" text="Ikke emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert text="Emphasized" saturation="emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
  <nve-alert text="Ikke emphasized" open>
    <nve-icon slot="icon" name="info"></nve-icon>
  </nve-alert>
</div>

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.

<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	Type	Arvet fra	Beskrivelse	Reflected
title	string = ''		Tykk tekst, vises helt til venstre
text	string = ''		Tynnere beskrivelse tekst
saturation	'emphasized' | null = null		Bestemmer sterkere bakgrunnsfarge
leftStroke	boolean = false		Ramme linje til venstre
base	HTMLElement	SlAlert
countdownElement	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.
countdown	'rtl' | 'ltr' | undefined	SlAlert	Enables a countdown that indicates the remaining time the alert will be displayed. Typically used to indicate the remaining time before a whole app refresh.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
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.