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="Overskrift"> Innhold </nve-dialog>

Eksempler

Ikon foran label

html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog label="Overskrift" icon="info"> Innhold </nve-dialog>

Label som eget spor

Du kan legge overskriften inn et eget spor dersom du trenger mer kompleks styling eller struktur. Men merk at den fortsatt legges inn i en <h2>-tag

html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog>
  <div slot="label">Denne overskriften er i et eget spor</div>
  Innhold
</nve-dialog>

Det er egne spor for å legge innhold ved siden av lukk-knapp og i bunnen av dialogboksen Sporet ved lukk-knapp skal kun brukes til enkle knapper, alt annet enn nve-button med enkelt nve-icon i seg vil ikke styles korrekt

html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog label="Overskrift">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan urna sit amet velit tempor accumsan. Interdum
  et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ipsum dolor. Nullam a molestie risus, eget
  facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
  aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
  <nve-button variant="ghost" onclick="() => {}" slot="header-actions">
    <nve-icon name="warning" />
  </nve-button>
  <nve-button variant="ghost" onclick="() => {}" slot="header-actions">
    <nve-icon name="open_in_new" />
  </nve-button>
  <div slot="footer">
    <nve-button variant="primary" onclick="this.parentElement.parentElement.hide()">Ok</nve-button>
    <nve-button disabled>Slett alt</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 null for å unngå å skape unødvendig mellomrom i layouten.