Portal

A component or action to mount content from one part of the dom to another.

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

	const preview = '#tabs-preview';

	let target = $state<HTMLElement | string>(preview);
</script>

<Button variant="primary" onclick={() => (target = target === 'main header' ? preview : 'main header')}>
	Portal content
</Button>

<Portal
	bind:target
	class={cn(
		target === 'body' ? 'absolute top-0' : '',
		'rounded-full bg-black px-4 py-1 text-sm text-white dark:bg-white dark:text-black'
	)}
>
	Hi there
</Portal>

Prop	Type	Description
`target`	`string \| HTMLElement` `Default: body`	The element to mount to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-portal`	`''`	The base data attribute, can be used for styling.

Basic Example

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

<Portal>
	<!-- content... -->
</Portal>

Svelte action

If you don’t want to use a whole component, you can use the usePortal action.

View the usePortal page for more info.

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

<div use:usePortal>
	<!-- content... -->
</div>