LoopOS UI v1.1.29.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="lui-toaster lui-toaster--is-toast lui-toaster--dismissible lui-toaster--animated" data-controller="toaster" data-toaster-persistent-value="false" data-toaster-timeout-value="2000">
  <div class="lui-header lui-header--small">
    <div class="lui-header__title_container">
      <div class="lui-header__icon lui-header__icon__informative lui-header__icon--small">
        <i class="lui-m_icon material-symbols-outlined lui-m_icon__semantic--informative" style="--lui-micon-size: 14px;">
          info
        </i>
      </div>
    <span class="lui-header__title_container__title">
        Title
      </span>
    </div>
    <span class="lui-header__description">
      Description
    </span>
  </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
10
11
render(LooposUi::Message.new(
  title: title,
  description: description,
  variant: variant,
  dismissible: dismissible,
  animated: animated,
  timeout: timeout || 0,
  persistent: persistent,
  is_toast: is_toast,
  fullwidth: fullwidth
))

No notes provided.

Param Description Input

—

—

—

—

—

milliseconds to dismiss

Disables timeout

Render as a toast

Render as a fullwidth message

Description

The Message 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). When used as a toast (is_toast: true), it uses the HTML Popover API for positioning and animations. Message toast should be streamed using the stream_* helpers. It will appear at the top of the screen with a slide-down animation (when animated: true).

When used as a message (is_toast: false), it renders inline without popover functionality, animations, or auto-dismissal.

Arguments

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

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::StreamMessage 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::Message.

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

Shorthand syntax

You also have helper methods for each variant:

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

Inline Message Usage

For inline messages (not toast notifications), you can use the Message class:

<%= render LooposUi::Message.new(
  title: "Information",
  description: "This is an inline message",
  variant: :informative,
  is_toast: false
) %>

Or simply:

<%= render LooposUi::Message.new(
  title: "Information", 
  description: "This is an inline message",
  variant: :informative,
  is_toast: false
) %>

Show a toaster from the Frontend

NOTE: Feature currently disabled

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

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

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

Note: When using the frontend showToaster function, the is_toast parameter defaults to true for toast notifications. For inline messages, you would typically render them directly in your templates using the Message component.