glaze_basecoat - v3.1.0

glaze/basecoat/toast

Basecoat documentation: https://basecoatui.com/components/toast/

Programmatic toast notifications.

Anatomy

Recipes

import glaze/basecoat/toast
import lustre/element/html

fn success_toast_markup() {
  toast.toast([toast.success()], [
    toast.title([], [html.text("Success")]),
    toast.description([], [html.text("Your changes have been saved.")]),
  ])
}

fn show_toast_script() {
  toast.show(toast.Config(toast.Success, "Success", "Saved!", None, None))
}

References

Types

Action

</> 
pub type Action {
  Action(label: String, onclick: option.Option(String))
}

Constructors

Alignment

</> 
pub type Alignment {
  AlignStart
  AlignCenter
  AlignEnd
}

Constructors 

  • AlignStart
  • AlignCenter
  • AlignEnd

Cancel

</> 
pub type Cancel {
  Cancel(
    label: option.Option(String),
    onclick: option.Option(String),
  )
}

Constructors

Category

</> 
pub type Category {
  Success
  Info
  Warning
  Error
}

Constructors 

  • Success
  • Info
  • Warning
  • Error

Config

</> 
pub type Config {
  Config(
    category: Category,
    title: String,
    description: String,
    action: option.Option(Action),
    cancel: option.Option(Cancel),
  )
}

Constructors

Values

action_to_json

</> 
pub fn action_to_json(action: Action) -> json.Json

cancel_to_json

</> 
pub fn cancel_to_json(cancel: Cancel) -> json.Json

category_to_json

</> 
pub fn category_to_json(category: Category) -> json.Json

config_to_json

</> 
pub fn config_to_json(config: Config) -> json.Json

container

</> 
pub fn container(
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

The toaster container required for toast notifications.

Place this at the end of your body element.

Example

import glaze/basecoat/toast

html.body([], [
  // Your content...
  toast.container([]),
])

container_aligned

</> 
pub fn container_aligned(
  align: Alignment,
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

Add the toaster container required for toast notifications.

Place this at the end of your body element.

Example

import glaze/basecoat/toast

html.body([], [
  // Your content...
  toast.container_aligned(toast.AlignStart, []),
])

content

</> 
pub fn content(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

description

</> 
pub fn description(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

dismiss_button

</> 
pub fn dismiss_button(
  label: String,
  attrs: List(attribute.Attribute(msg)),
) -> element.Element(msg)

dispatch

</> 
pub fn dispatch(config: Config) -> Nil

Trigger a toast notification.

Available in the Browser.

duration

</> 
pub fn duration(ms: Int) -> attribute.Attribute(msg)

Useful for when creating custom toasts with toast.

error

</> 
pub fn error() -> attribute.Attribute(msg)

Useful for when creating custom toasts with toast.

event_name

</> 
pub const event_name: String

Name of the CustomEvent dispatched in the Browser environment.

document.dispatchEvent(new CustomEvent('basecoat:toast', /* payload */));
</> 
pub fn footer(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

info

</> 
pub fn info() -> attribute.Attribute(msg)

Useful for when creating custom toasts with toast.

success

</> 
pub fn success() -> attribute.Attribute(msg)

Useful for when creating custom toasts with toast.

title

</> 
pub fn title(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

toast

</> 
pub fn toast(
  attrs: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

An element to create a custom toast.

The structure looks like this:

import glaze/basecoat/toast
import lustre/element/html
import lustre/element/svg

fn custom_toast() {
  toast.toast([toast.success()], [
    svg.svg([], [
      // an icon...
    ]),
    toast.content([], [
      toast.title([], [html.text("Lorem Ipsum!")]),
      toast.description([], [html.text("Animi et eos quisquam debitis qui illum.")])
    ]),
    toast.footer([], [
      toast.dismiss_button("go away", [])
    ])
  ])
}

warning

</> 
pub fn warning() -> attribute.Attribute(msg)

Useful for when creating custom toasts with toast.

✨ Search Document