Modal

Modal is used to show a dialog or a box when you click a button.

Basic 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">
				<Modal.Content.Header slot="header">Modal</Modal.Content.Header>
				<Modal.Content.Body slot="body">I am the content</Modal.Content.Body>
			</Modal.Content>
		</Modal>
	{/if}
</Portal>

Long Content Modal With Footer

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">
				<Modal.Content.Header slot="header">Modal</Modal.Content.Header>
				<Modal.Content.Body slot="body">I am the content</Modal.Content.Body>
			</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 Props

collapsed	boolean	false
collapsedWidth	string	4.5rem
expandedWidth	string	12rem

Modal.Content Slots

header	<Modal.Content.Header slot="header" />
cover	<Modal.Content.Cover slot="cover" />
body	<Modal.Content.Body slot="body" />
default
footer	<Modal.Content.Footer slot="footer" />
actions	<Modal.Content.Actions slot="actions" />

Modal.Content.Header Slots

default
extra

Modal.Content.Cover Slots

default
default	<Card.Cover.Overlay />

Modal.Content.Body Slots

default

Modal.Content.Footer Slots

default

Modal.Content.Actions Slots

default

<Card.Actions.Action />

Modal.Content.Actions.Action Slots

icon	<Card.Actions.Action.Icon slot="icon" />
label	<Card.Actions.Action.Label slot="label" />

Modal.Content.Actions.Action.Icon Props

data	string (IconData)
viewBox	string	0 0 24 24
size	string	24px
width	string	24px
height	string	24px
color	string	currentColor
stroke	string \| undefined
fill	string	currentColor

Modal.Content.Actions.Action.Label Slots

default