1.3.0 • Published 11 months ago
svelte-modals v1.3.0
svelte-modals
A simple, flexible, zero-dependency modal manager for Svelte.
Getting Started
npm install svelte-modals
Add Modals
somewhere in your app. This is where the modals will render.
<script>
import { Modals, closeModal } from 'svelte-modals'
</script>
<Modals>
<div
slot="backdrop"
class="backdrop"
on:click={closeModal}
/>
</Modals>
<style>
.backdrop {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0,0,0,0.50)
}
</style>
Create your Modal component
<script>
import { closeModal } from 'svelte-modals'
// provided by Modals
export let isOpen
export let title
export let message
</script>
{#if isOpen}
<div role="dialog" class="modal">
<div class="contents">
<h2>{title}</h2>
<p>{message}</p>
<div class="actions">
<button on:click="{closeModal}">OK</button>
</div>
</div>
</div>
{/if}
<style>
.modal {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
/* allow click-through to backdrop */
pointer-events: none;
}
.contents {
min-width: 240px;
border-radius: 6px;
padding: 16px;
background: white;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: auto;
}
h2 {
text-align: center;
font-size: 24px;
}
p {
text-align: center;
margin-top: 16px;
}
.actions {
margin-top: 32px;
display: flex;
justify-content: flex-end;
}
</style>
Open it
<script>
import { openModal } from 'svelte-modals'
import Modal from './Modal.svelte'
function handleClick() {
openModal(Modal, { title: 'Alert', message: 'This is an alert' })
}
</script>
<button on:click="{handleClick}">Open Modal</button>
1.3.0-next.2
11 months ago
1.3.0-next.1
11 months ago
1.3.0
11 months ago
1.2.1
1 year ago
1.2.0
2 years ago
2.0.0-beta.2
2 years ago
2.0.0-beta.1
2 years ago
2.0.0-beta.0
2 years ago
1.2.0-beta.0
2 years ago
1.1.0
2 years ago
1.1.0-beta.2
2 years ago
1.1.0-beta.1
2 years ago
1.1.0-beta.0
2 years ago
1.0.2
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago