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 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" />
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue