svelte-portal

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

Installation

yarn add @yeungkc/svelte-portal -D
npm install @yeungkc/svelte-portal --save-dev

Usage

Setup Portal Container

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" />

Show Portal

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.

Known issues

Currently, svelte-portal does not support setting bind and forwarding event like svelte:component.