Components

On This Page

Toast Component

Toasts are messages that are displayed temporarily. Toast messages are wrapped inside a Toast component, which is created and managed by a Toaster component.

Toast With Message

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
Imports
import live-web.dom
import live-web-view.button
import live-web-view.overlay
import live-web-view.content
Styles
static any[] use = [PrimaryButton, Toaster, Content]
Content
Toaster{ 
    id: toaster 
}
PrimaryButton{
    T`Open message.`
    on click: (e) => {
        e.preventDefault()
        toaster.add(
            Toast{
                ToastTitle`Toast Message`
                Content{
                    T`Message displayed succesfully.`
                }
            }
        )
    }
}

Data Driven Toast

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
Imports
import live-web.dom
import live-web-view.button
import live-web-view.overlay
import live-web-view.content
Styles
static any[] use = [PrimaryButton, Toaster, Content]
Content
Toaster{ 
    id: toaster 
}
PrimaryButton{
    T`Open message.`
    on click: (e) => {
        e.preventDefault()
        toaster.data = toaster.data.concat({
            id: Toaster.createToastId(),
            title: 'Toast Message',
            content: 'Message Displayed Successfully.' 
        })
    }
}

Single Toast With Message

Toasts can either be overwritten by the next toast, or stacked on top of each other. The example above stacks toasts on top of each other, while this one allows only a single toast to be displayed.This can e controlled by the Toaster.single property.

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
Imports
import live-web.dom
import live-web-view.button
import live-web-view.overlay
import live-web-view.content
Styles
static any[] use = [PrimaryButton, Toaster, Content]
Content
Toaster{ 
    id: toaster 
    single: true
}
PrimaryButton{
    T`Open message.`
    on click: (e) => {
        e.preventDefault()
        toaster.add(
            Toast{
                ToastTitle`Toast Message`
                Content{
                    T`Message displayed succesfully.`
                }
            }
        )
    }
}

Toast positioning in parent

By default, toasts are positioned relative to the screen, but they can be configured to be positioned in their parent by configuring the Toaster.position property.

Expand/Collapse source code
Copied
Copy source sections
Copy source as is
Imports
import live-web.dom
import live-web-view.button
import live-web-view.overlay
import live-web-view.content
Styles
static any[] use = [PrimaryButton, Toaster, Content]
Content
Toaster{ 
    id: toaster 
    single: true
    position: Toaster.Position.Parent
}
PrimaryButton{
    T`Open message.`
    on click: (e) => {
        e.preventDefault()
        toaster.add(
            Toast{
                ToastTitle`Toast Message`
                Content{
                    T`Message displayed succesfully.`
                }
            }
        )
    }
}