Created a Svelte Portal component.

This commit is contained in:
Bradley Shellnut 2021-07-27 17:15:51 -07:00
parent b4eb67af8c
commit 2b02498ec7
2 changed files with 33 additions and 1 deletions

29
src/lib/Portal.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
function portal(node) {
let target;
function update() {
target = document.querySelector('body');
target.appendChild(node);
node.hidden = false;
}
function destroy() {
if (node.parentNode) {
// Child will tell the parent to remove itself
node.parentNode.removeChild(node);
}
}
update();
return {
update,
destroy
};
}
</script>
<div use:portal hidden>
<slot />
</div>

View file

@ -2,6 +2,7 @@
import SearchFilter from '$lib/SearchFilter.svelte';
import Field from '$lib/Field.svelte';
import Markdown from '$lib/Markdown.svelte';
import Portal from '$lib/Portal.svelte';
// import BetterAccordion from '$lib/BetterAccordion.svelte';
// import Toggle from '$lib/Toggle.svelte';
let isToggled = false;
@ -14,7 +15,9 @@
<h1>Welcome to Level Up UI {search}</h1>
<Markdown bind:text />
<Portal>
<Markdown bind:text />
</Portal>
<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />