Skip to content

nve-dialog

En dialogboks. Vil du ha ikon foran overskriften, bruk `icon`. Skal det ikke være mulig å trykke utenfor for å lukke dialogen, bruk `disableBackground`.

Arvet fra SlDialog.

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

 

html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog label="label">
  Innhold
  <div slot="footer">
    <nve-button onclick="this.parentElement.parentElement.hide()">Lukk</nve-button>
  </div>
</nve-dialog>

Spor

NavnBeskrivelse
labelteksten som skal vises i overskriften. Eller du kan bruke label-attributtet
bodyhovedinnholdet
footerfeltet i bunnen hvor knappene er plassert

Egenskaper

NavnTypeArvet fraBeskrivelseReflected
iconstring = ''Ikonet som skal vises
disableBackgroundboolean = falseHvis denne er satt, kan man ikke trykke utenfor dialogen for å lukke den.

Metoder

NavnParametreReturtypeArvet fraBeskrivelse
handleRequestClose
event: CustomEvent
Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
updateIconOppdaterer ikonet som vises i dialogens tittel. Metoden søker først etter tittel-elementet i komponentens skygge-DOM. Hvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres tittel-elementets stil for å inkludere det angitte ikonet. Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til 'none' for å unngå å skape unødvendig mellomrom i layouten.