mirror of
https://github.com/BradNut/svelte-library
synced 2025-09-08 17:40:21 +00:00
Created a Svelte Portal component.
This commit is contained in:
parent
b4eb67af8c
commit
2b02498ec7
2 changed files with 33 additions and 1 deletions
29
src/lib/Portal.svelte
Normal file
29
src/lib/Portal.svelte
Normal 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>
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import SearchFilter from '$lib/SearchFilter.svelte';
|
import SearchFilter from '$lib/SearchFilter.svelte';
|
||||||
import Field from '$lib/Field.svelte';
|
import Field from '$lib/Field.svelte';
|
||||||
import Markdown from '$lib/Markdown.svelte';
|
import Markdown from '$lib/Markdown.svelte';
|
||||||
|
import Portal from '$lib/Portal.svelte';
|
||||||
// import BetterAccordion from '$lib/BetterAccordion.svelte';
|
// import BetterAccordion from '$lib/BetterAccordion.svelte';
|
||||||
// import Toggle from '$lib/Toggle.svelte';
|
// import Toggle from '$lib/Toggle.svelte';
|
||||||
let isToggled = false;
|
let isToggled = false;
|
||||||
|
|
@ -14,7 +15,9 @@
|
||||||
|
|
||||||
<h1>Welcome to Level Up UI {search}</h1>
|
<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" />
|
<Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue