portal

A portal changes the physical placement of its children in the renderable tree, while keeping them logically inside your Lustre app. This makes it possible to implement things like modals and overlays that need to be rendered at a different position in the terminal layout.

Types

Error

</>

It’s possible for the portal to fail when teleporting its children for a number of reasons. If that happens, the element will emit an "error" event with details on what went wrong.

pub type Error {
  MissingTarget
  TargetNotFound(id: String)
  TargetIsPortal(id: String)
}

Constructors

```
MissingTarget
```
The portal’s "target" attribute was missing or empty.
```
TargetNotFound(id: String)
```
No element could be found matching the portal’s "target" attribute.
```
TargetIsPortal(id: String)
```
The portal’s "target" attribute points to another portal element. This could lead to elements being teleported back and forth between portals, causing unexpected behaviour.

Values

error_decoder

</>

pub fn error_decoder() -> decode.Decoder(Error)

Decode the detail of a portal’s "error" event. You might use this decoder if you’re writing your own event handler instead of the provided one.

name

</>

pub const name: String

The tag name of the portal element.

on_error

</>

pub fn on_error(
  handler: fn(Error) -> msg,
) -> vattr.Attribute(msg)

A portal could fail for a number of reasons. When it does, it will emit an "error" event with some information on what went wrong. You might use this event listener to log errors or recover your UI if something important could not be teleported.

to

</>

pub fn to(
  target id: String,
  with attributes: List(vattr.Attribute(msg)),
  teleport children: List(vnode.Element(msg)),
) -> vnode.Element(msg)

Render a portal, teleporting all children to another element in the renderable tree. The target must be the id of an existing element.

to_root

</>

pub fn to_root(
  with attributes: List(vattr.Attribute(msg)),
  teleport children: List(vnode.Element(msg)),
) -> vnode.Element(msg)

Render a portal, teleporting all children to the root of the renderable tree. This is useful for modals and overlays that should sit above all other content.