A Portal library for Svelte. Supports SSR and No dom move.
online example:https://svelte-portal.vercel.app/
example code:https://github.com/YeungKC/svelte-portal/tree/master/src/routes
yarn add @yeungkc/svelte-portal -D
npm install @yeungkc/svelte-portal --save-dev
It is recommended to set up the <PortalContainer />
in your +layout.svelte, for example:
// +layout.svelte
<slot />
<PortalContainer />
You can setup multiple Portal Containers by using the name parameter:
// +layout.svelte
<slot />
<PortalContainer name="foo" />
Setup the <Portal />
where you want it to be displayed. The usage is similar to <svelte:component>
.
<Portal portal-id="id" portal-container-name="name" this={SomeComponent} />
If SomeComponent requires a parameter, foo, you can add it in the <Portal>
:
<Portal portal-id="id" portal-container-name="name" this={SomeComponent} {foo} />
portal-id
is an optional parameter for setting a fixed id for the Portal. It defaults to a random id.
portal-container-name
is an optional parameter for selecting a specific Portal Container for the Portal.
Currently, svelte-portal does not support setting bind and forwarding event like svelte:component.