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.
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
| 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: any | 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 '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. |
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. |