Portal

View Source

NOTE: Introduced feature in v0.2.0.

Portal is used to render a layout outside of its original containing DOM tree, moving it somewhere else.

<script>
    import {Box, Portal} from "@kahi-ui/framework";

    let container = null;
</script>

<Box
    bind:element={container}
    palette="accent"
    padding="small"
>
    I am the new container element!
</Box>

<Portal target={container}>
    <Box padding="small">And I was moved to here!</Box>
</Portal>

Imports

<script>
    import {Portal} from "@kahi-ui/framework";
</script>

Compatibility

Portal wraps your slotted content in a display: contents containing element, so keep that in mind in your CSS selectors. It also only remounts its self to the target on clientside Browsers with Javascript enabled. So you need to plan a SSR-compatible fallback if using in a SSR scenario.

Loading

NOTE: Introduced feature in v0.3.5.

USAGE: Use your Browser's devtools to observe this feature.

You can customize the slot loading behavior of Portal Components to not render their children, via the loading property.

<script>
    import {Box, Portal} from "@kahi-ui/framework";

    let container = null;
</script>

<Box
    bind:element={container}
    palette="accent"
    padding="small"
>
    I am the new container element!
</Box>

<Portal target={container} loading="lazy">
    <Box padding="small">And I was moved to here!</Box>
</Portal>

Properties

Portal

Name Description Types
target Sets the HTMLElement or CSS selector used to target the new container element.
document.body (DEFAULT) HTMLElement string
loading When the property is set and the Portal Component is not mounted, the child content is not rendered to DOM.
lazy
prepend Sets the Portal to mounts its self before all other elements in the new container element, instead of after.
boolean

Events

Portal

Name Description Types
mount Fires whenever the Portal mounts to the target.
CustomEvent<void>

Slots

Portal

Name Description Types
default Default unnamed slot.
{}