@isoftdata/svelte-modal

Svelte Modal

Install

npm i @isoftdata/svelte-modal

Props

Name	Type	Description	Default Value
backdropClickCancels	boolean	Determines whether clicking on the backdrop should close the modal.	true
cancelButtonColor	ButtonColors	The Bootstrap class to apply to the cancel button.	"secondary"
cancelButtonIcon	string	The FontAwesome icon to display on the cancel button, without the preceeding fa-.	"times"
cancelButtonOutline	boolean	Whether the button should be outlined, instead of solid.	false
cancelButtonText	string	The text to display on the cancel button.	"Close"
cancelShown	boolean	Determines whether the cancel button is shown in the modal (This is the Cancel button at the bottom)footer.	true
closeId	string	The ID of the close button.	"close-modal"
closeShown	boolean	Determines whether the close button is shown in the modal (This is the X in the top right corner) header.	true
confirmButtonColor	ButtonColors	The Bootstrap color class to apply to the confirm button.	"success"
confirmButtonDisabled	boolean	Determines whether the confirm button is disabled.	false
confirmButtonFormId	string	The ID of the form to associate with the confirm button when using the "submit" button type.	""
confirmButtonIcon	string	The FontAwesome icon to display on the confirm button, without the preceeding fa-.	"check"
confirmButtonIsLoading	boolean	Whether to disable and show a spinner on the "Confirm" button.	false
confirmButtonOutline	boolean	Whether the button should be outlined, instead of solid.	false
confirmButtonText	string	The text to display on the confirm button.	"Confirm"
confirmButtonTitle	string	The title of the confirm button	""
confirmButtonType	"button" | "submit" | "reset"	The type of the confirm button (e.g., "button" or "submit").	"button"
confirmShown	boolean	Determines whether the confirm button is shown in the modal footer.	true
footerClass	string	Custom CSS class to apply to the modal footer element.	"align-items-end"
footerShown	boolean	Determines whether the modal footer is shown.	true
footerStyle	string	Any additional CSS styles to add to the modal footer.	""
fullscreen	boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	Breakpoint to apply fullscreen from that size and down. Boolean true for all sizes. This option is only available with Bootstrap 5.	false
headerShown	boolean	Determines whether the modal header is shown.	true
modalBodyClass	string	Additional CSS classes to apply to the modal body element.	''
modalDialogClass	string	Additional CSS classes to apply to the modal dialog element.	''
modalId	string	The ID of the modal-body element.	"itModal"
modalSize	"sm" | "" | "lg" | "xl" | "xxl"	Determines the maximum width of the modal.	""
savingInProgress	boolean	Determines whether a saving operation is in progress (useful for showing a loading state on the confirm button).	false
show	boolean	Determines whether the modal is currently visible or hidden. You probably want to bind: to this.	false
showModalContent	boolean	Determines whether to show the modal content (header, body, and footer) or hide it (can be used for a loading state).	true
subtitle	string	An optional subtitle to display below the main title.	''
title	string	The main title of the modal.	"Confirm"
transitionMode	string	The transition mode for the modal and its content (possible values: "present", "cardMovePrevious", "cardMoveNext").	"present"
zIndex	number	The z-index of the modal element.	20000

Slots

• default - The modal body.
• modalHeader - The modal header.
• modalFooter - the modal footer.

Events

• backdrop - Fired when the backdrop is clicked. event.details is the MouseEvent (mouseup) from clicking the button.
• close - Fired when "Cancel" or "Close" button is clicked. event.details is the MouseEvent (click) from clicking the button.
• confirm - Fired when Confirm button is clicked. event.details is the MouseEvent (click) from clicking the button.

Example

<script lang="ts">
	import Modal from '@isoftdata/svelte-modal'
</script>

<Modal
	bind:show
	on:close={() => (show = false)}
	on:confirm={() => (show = false)}
>
	Modal content goes here.
</Modal>