BradNut/svelte-library
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-library synced 2025-09-08 17:40:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create basic Modal component that opens and closes on top of content using the Portal.

Browse source
This commit is contained in:
Bradley Shellnut 2021-07-27 17:29:37 -07:00
parent 2b02498ec7
commit 2198dd18c7
2 changed files with 50 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/lib/Modal.svelte Normal file
View file

@ -0,0 +1,40 @@
<script>
import { fly, fade } from 'svelte/transition';
import Portal from './Portal.svelte';
export let isModalOpen = false;
function closeModal() {
isModalOpen = false;
}
</script>
{#if isModalOpen}
<Portal>
<div class="modal-wrapper" transition:fly={{ opacity: 0, y: 100 }}>
<button on:click={closeModal} aria-label="Close Modal Box">Close</button>
<slot />
</div>
<div on:click={closeModal} transition:fade class="background" />
</Portal>
{/if}
<style>
.modal-wrapper {
position: fixed;
inset: 100px 0 0;
min-width: 320px;
max-width: 530px;
margin: 0 auto;
width: 100%;
z-index: 101;
}
.background {
background: black;
opacity: 0.8;
cursor: pointer;
inset: 0;
position: fixed;
z-index: 100;
}
</style>

18
src/routes/index.svelte
View file

@ -2,12 +2,14 @@
import SearchFilter from '$lib/SearchFilter.svelte';
import Field from '$lib/Field.svelte';
import Markdown from '$lib/Markdown.svelte';
import Modal from '$lib/Modal.svelte';
import Portal from '$lib/Portal.svelte';
// import BetterAccordion from '$lib/BetterAccordion.svelte';
// import Toggle from '$lib/Toggle.svelte';
let isToggled = false;
let isModalOpen = false;
let text = '';
$: console.log(text);
let search = '';
let items = ['scott', 'wes', 'landon', 'courtney', 'lucie', 'brooklyn', 'Samson'];
@ -15,13 +17,13 @@
<h1>Welcome to Level Up UI {search}</h1>
<Portal>
<Markdown bind:text />
</Portal>
<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
<Field value={0} label="Number" type="number" />
<Modal {isModalOpen}>
<div style="background: white; box-shadow: 1px 1px 4px rgba(0,0,0,0.3);">
<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
<Field value={0} label="Number" type="number" />
</div>
</Modal>
<button on:click={() => (isModalOpen = true)}>Open Modal Form</button>
<SearchFilter {items} bind:search />