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

<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

Navn	Beskrivelse
label	teksten som skal vises i overskriften. Eller du kan bruke label-attributtet
body	hovedinnholdet
footer	feltet i bunnen hvor knappene er plassert
(standard)	The dialog's main content.
header-actions	Optional actions to add to the header. Works best with `<sl-icon-button>`.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-show	SlDialog	Emitted when the dialog opens.
sl-after-show	SlDialog	Emitted after the dialog opens and all animations are complete.
sl-hide	SlDialog	Emitted when the dialog closes.
sl-after-hide	SlDialog	Emitted after the dialog closes and all animations are complete.
sl-initial-focus	SlDialog	Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
sl-request-close	SlDialog	Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.

Egenskaper

Navn	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
icon		string	''		Ikonet som skal vises
disableBackground		boolean	false		Hvis denne er satt, kan man ikke trykke utenfor dialogen for å lukke den.
modal			new Modal(this)	SlDialog	Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping.
dialog		HTMLElement		SlDialog
panel		HTMLElement		SlDialog
overlay		HTMLElement		SlDialog
open		boolean	false	SlDialog	Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
label		string	''	SlDialog	The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
noHeader		boolean	false	SlDialog	Disables the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleRequestClose	event: any			Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
updated	changedProperties: any
updateIcon				Oppdaterer 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.
handleOpenChange			SlDialog
show			SlDialog	Shows the dialog.
hide			SlDialog	Hides the dialog

Deler

Navn	Beskrivelse
base	The component's base wrapper.
overlay	The overlay that covers the screen behind the dialog.
panel	The dialog's panel (where the dialog and its content are rendered).
header	The dialog's header. This element wraps the title and header actions.
header-actions	Optional actions to add to the header. Works best with `<sl-icon-button>`.
title	The dialog's title.
close-button	The close button, an `<sl-icon-button>`.
close-button__base	The close button's exported `base` part.
body	The dialog's body.
footer	The dialog's footer.