LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="lui-toaster lui-toaster--animated" data-controller="toaster" data-toaster-persistent-value="false" data-toaster-timeout-value="2000">
  <div class="lui-toaster__content">
    <div class="lui-toaster__content-title">
      <i class="fa-regular fa-circle-info fa-xs text-general-informative-800"></i>
      <div class="lui-toaster__content-title__text">
        Title
      </div>
    </div>
    <div class="lui-toaster__content-description">Description</div>
  </div>
  <div class="lui-toaster__close" data-action="click->toaster#dismiss">
    <i class="fa-regular fa-xmark fa-xs"></i>
  </div>
</div>

Toaster

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
render(LooposUi::Toaster.new(
  title: title,
  description: description,
  variant: variant,
  dismissible: dismissible,
  animated: animated,
  timeout: timeout || 0,
  persistent: persistent,
))

No notes provided.

Param Description Input

—

—

—

—

—

milliseconds to dismiss

Disables timeout

Description

The Toaster component is a notification element that appears at the top of the screen to display important messages to users. It supports different variants for different types of notifications (informative, success, warning, danger) and can include a title, description, and dismissal option. It uses the HTML Popover API for positioning and animations, and appears at the top of the screen with a slide-down animation (when animated: true).

Arguments

Property Default Description
title nil Title text of the toaster notification (required)
description nil Optional description text below the title
variant :informative Visual style of the toaster (:informative, :success, :warning, :danger)
dismissible true Whether the toaster can be dismissed via close button
animated true Whether to animate the toaster entrance/exit
timeout 2000 Time in milliseconds before auto-dismissal
persistent false If true, disables auto-dismissal timeout

Variants

Each variant comes with its own icon and styling:

  • :informative - Blue info icon
  • :success - Green checkmark icon
  • :warning - Yellow exclamation icon
  • :danger - Red X icon

Show a toaster from the Backend

You can render a toaster inline in your view, but more often than not you will want to show them like a notification from the backend, in a controller or service for example.

This can be achieved by streaming the toaster using the stream_toaster_* methods, available through the LooposUi::StreamToaster module. This module is automatically included in the ApplicationController.

The stream_toaster_* methods are:

  • stream_toaster(toaster, **options)
  • stream_toaster_success(**options)
  • stream_toaster_warning(**options)
  • stream_toaster_danger(**options)
  • stream_toaster_informative(**options)

The stream_toaster method is the most generic one, and accepts a toaster argument, which is an instance of LooposUi::Toaster. The other methods are convenience methods that create a LooposUi::Toaster instance with the appropriate variant and then stream it.

You also have helper methods for each variant:

LooposUi::Toaster.success(title: "Operation completed")
LooposUi::Toaster.warning(title: "Something went wrong")
LooposUi::Toaster.danger(title: "An error occurred")
LooposUi::Toaster.informative(title: "Information")
# equivalent to
LooposUi::Toaster.new(title: "Operation completed", variant: :success)
# ...

You can also clear all toasters by calling stream_clear_toasters in your controller.

Show a toaster from the Frontend

To show a toaster from the frontend, for example from a Stimulus controller or a React component, you can use the showToaster function.

import showToaster from "@loopos_ui/toaster"
// ...
showToaster({
    title: "Operation completed",
    description: "The operation was completed successfully",
    variant: "success",
    timeout: 2000,
    persistent: false,
    dismissible: true,
    animated: true,
})

The showToaster function expects a toaster object, which follows the same interface as the LooposUi::Toaster class.