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.

 

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

Eksempler

Ikon foran label

<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

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

Knapper ved siden av lukk, og slot for footer

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

<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

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	Type	Arvet fra	Beskrivelse	Reflected
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: CustomEvent			Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
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 null 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.

Spesifikke CSS-variabler for komponent

Navn	Beskrivelse
--width	The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
--header-spacing	The amount of padding to use for the header.
--body-spacing	The amount of padding to use for the body.
--footer-spacing	The amount of padding to use for the footer.