Portal - Lithesome

Preview

Code

<script lang="ts">
	import { portal } from 'lithesome';
	import { Button, Container } from '$site/index.js';

	let from = $state<HTMLElement>();
	let to = $state<HTMLElement>();

	let toggle = $state(false);
</script>

<div class="flex flex-col justify-center gap-4">
	<Button variant="secondary" onclick={() => (toggle = !toggle)}>Toggle portal</Button>

	<div class="flex gap-4">
		<Container bind:ref={from}>
			Container 1
			<div {@attach portal(toggle ? to : from)}>Portal content</div>
		</Container>

		<Container bind:ref={to}>Container 2</Container>
	</div>
</div>

Basic Example

<script>
	import { portal } from 'lithesome';
</script>

<div {@attach portal()}>
	Portal content
</div>

Changing the target

If mounting to the body isn’t what you need, pass the element you want to mount to as the first argument to the attachment.

<script>
	import { portal } from 'lithesome';
</script>

<div {@attach portal('#layers')}>
	Portal content
</div>