logo-icon
STWUI

Modal



svelte
<script lang="ts">
	import { Modal, Portal, Card } from 'stwui';

   let open = false;

	function openModal() {
		open = true;
	}

	function closeModal() {
		open = false;
	}
</script>

<Button type="primary" on:click={openModal}>Open Modal</Button>

<Portal>
	{#if open}
		<Modal handleClose={closeModal}>
			<Modal.Content slot="content">
				<Card>
					<Card.Header slot="header">Modal</Card.Header>
					<Card.Content slot="content">I am the content</Card.Content>
				</Card>
			</Modal.Content>
		</Modal>
	{/if}
</Portal>

Modal Props

handleClose () => void

Modal Slots

backdrop <Modal.Backdrop slot="backdrop" />
content <Modal.Content slot="content" />
default

Modal.Backdrop Props

handleClose () => void

Modal.Content Slots

default