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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<div class="flex flex-col gap-4">
  <a data-turbo-method="get" disabled="disabled" href="/toaster/random_toaster?type=informative">
    <div class="lui-toaster" data-controller="toaster" data-toaster-persistent-value="true" 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">
            Hover or click me
          </span>
        </div>
    <span class="lui-header__description">
          To create a new toast
        </span>
      </div>
  </div>
  </a>  <a data-turbo-method="get" disabled="disabled" href="/toaster/random_toaster?type=success">
    <div class="lui-toaster" data-controller="toaster" data-toaster-persistent-value="true" 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__success lui-header__icon--small">
            <i class="lui-m_icon material-symbols-outlined lui-m_icon__semantic--success" style="--lui-micon-size: 14px;">
              check_circle
            </i>
          </div>
    <span class="lui-header__title_container__title">
            Hover or click me
          </span>
        </div>
    <span class="lui-header__description">
          To create a new toast
        </span>
      </div>
  </div>
  </a>  <a data-turbo-method="get" disabled="disabled" href="/toaster/random_toaster?type=warning">
    <div class="lui-toaster" data-controller="toaster" data-toaster-persistent-value="true" 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__warning lui-header__icon--small">
            <i class="lui-m_icon material-symbols-outlined lui-m_icon__semantic--warning" style="--lui-micon-size: 14px;">
              error
            </i>
          </div>
    <span class="lui-header__title_container__title">
            Hover or click me
          </span>
        </div>
    <span class="lui-header__description">
          To create a new toast
        </span>
      </div>
  </div>
  </a>  <a data-turbo-method="get" disabled="disabled" href="/toaster/random_toaster?type=danger">
    <div class="lui-toaster" data-controller="toaster" data-toaster-persistent-value="true" 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__error lui-header__icon--small">
            <i class="lui-m_icon material-symbols-outlined lui-m_icon__semantic--error" style="--lui-micon-size: 14px;">
              cancel
            </i>
          </div>
    <span class="lui-header__title_container__title">
            Hover or click me
          </span>
        </div>
    <span class="lui-header__description">
          To create a new toast
        </span>
      </div>
  </div>
  </a>  <a class="lui-button lui-button--size-default lui-button--neutral--primary w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/toaster/random_toaster" data-turbo-method="get" data-turbo-prefetch="false">
    <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
      Click me for random toast
    </span>          
    <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
      <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
        progress_activity
      </i>
    </div>
  </a>
  <a class="lui-button lui-button--size-default lui-button--neutral--primary w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" href="/toaster/clear_toasters" data-turbo-method="get" data-turbo-prefetch="false">
    <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
      Clear toasters
    </span>          
    <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
      <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
        progress_activity
      </i>
    </div>
  </a>
</div>
<turbo-frame data-turbo-action="advance" id="lui-main-layout" data-turbo-frame="lui-main-layout" class="min-h-0 " style="">
  <div class="lui-layout-loading">
    <div class="lui-layout-loading__content">
      <div class="lui-skeleton ">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
      <div class="lui-skeleton lui-skeleton--full">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
      <div class="lui-skeleton lui-skeleton--full">
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__item">
          <div class="lui-skeleton__bar" style="width: 100%"></div>
        </div>
        <div class="lui-skeleton__footer">
          <div class="lui-skeleton__bar--footer"></div>
          <div class="lui-skeleton__bar--footer lui-skeleton__bar--footer--invisible"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="lui-main_layout__content" data-skeleton-loading="true">
  </div>
</turbo-frame>
<turbo-frame id="lui-main-layout-actions">
</turbo-frame>

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
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div class="flex flex-col gap-4">
  <%
    args = {
      title: "Hover or click me",
      description: "To create a new toast",
      is_toast: false
    }
    link_args = {
      data: { turbo_method: :get }, disabled: true
    }
  %>
  <%= link_to random_toaster_toaster_index_path(type: :informative), **link_args do %>
    <%= render LooposUi::Message.informative(**args) %>
  <% end %>
  <%= link_to random_toaster_toaster_index_path(type: :success), **link_args  do %>
    <%= render LooposUi::Message.success(**args) %>
  <% end %>
  <%= link_to random_toaster_toaster_index_path(type: :warning), **link_args do %>
    <%= render LooposUi::Message.warning(**args) %>
  <% end %>
  <%= link_to random_toaster_toaster_index_path(type: :danger), **link_args do %>
    <%= render LooposUi::Message.danger(**args) %>
  <% end %>
  <%= render LooposUi::Button.new(
    href: random_toaster_toaster_index_path,
    text: "Click me for random toast",
    tag_options: { "data-turbo-method": :get, "data-turbo-prefetch": false}
  ) %>
  <%= render LooposUi::Button.new(
    href: clear_toasters_toaster_index_path,
    text: "Clear toasters",
    tag_options: { "data-turbo-method": :get, "data-turbo-prefetch": false}
  ) %>
</div>
<%# Message toasts will be streamed to a main layout %>
<%= render LooposUi::MainLayout.new do %>
<% end %>

No notes provided.

No params configured.

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.