RapidRails UI Book
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
<div role="alert message" aria-live="polite" aria-atomic="true" data-controller="rapidrailsui--fade-and-remove rapidrailsui--countdown rapidrailsui--dismiss" data-rapidrailsui--fade-and-remove-target="container" data-rapidrailsui--fade-and-remove-remove-after-transition-value="true" data-rapidrailsui--fade-and-remove-transition-duration-value="400" data-rapidrailsui--countdown-duration-value="42" data-rapidrailsui--countdown-on-complete-value="rapidrailsui--dismiss#dismiss" data-rapidrailsui--dismiss-action="click->rapidrailsui--dismiss#dismiss" class="flex w-full max-w-xl overflow-hidden justify-start shadow-md bg-sky-50 rounded-md transition-opacity duration-300">
  <!-- Icon Block -->
  <div class="flex items-center justify-center w-14 text-sky-500 mr-2 bg-sky-200" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" name="info" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-info icon-desc-info"><title id="icon-title-info">Info</title>
      <desc id="icon-desc-info">Info icon</desc>
      <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
    </svg>
  </div>
  <!-- Alert Content -->
  <div class="p-3 w-full flex flex-col">
    <h3 class="text-sky-600 font-bold">Alert Title</h3>
    <!-- Render the message if renders_one :message is used -->
    <div class="mt-2 text-sm text-sky-600">
      This is an alert message.
    </div>
  </div>
  <!-- Countdown Timer -->
  <span data-rapidrailsui--countdown-target="display" class="flex items-center mx-2 text-sm font-medium text-gray-500"></span>
  <!-- Dismiss Button -->
  <button type="button" class="p-2" data-action="click->rapidrailsui--dismiss#dismiss">
    <svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-gray-400 w-5 h-5 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-x-circle icon-desc-x-circle"><title id="icon-title-x-circle">X-circle</title>
      <desc id="icon-desc-x-circle">X-circle icon</desc>
      <path d="M9.75 9.75L14.25 14.25M14.25 9.75L9.75 14.25M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </button></div>
<div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
  <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
  <ul class="list-disc list-inside">
    <li>Title: Alert Title</li>
    <li>Type: info</li>
    <li>Shape: rounded</li>
    <li>Message: This is an alert message.</li>
    <li>Auto Dismiss: true</li>
    <li>Dismiss After: 42</li>
    <li>Dismiss Button: true</li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%= rui_alert(title: title, type: type, shape: shape, auto_dismiss: auto_dismiss, dismiss_after: dismiss_after, dismiss_button: dismiss_button) do |c| %>
  <%= c.with_message do %>
    <%= message %>
  <% end %>
<% end %>
<div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow">
  <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
  <ul class="list-disc list-inside">
    <li>Title: <%= title %></li>
    <li>Type: <%= type %></li>
    <li>Shape: <%= shape %></li>
    <li>Message: <%= message %></li>
    <li>Auto Dismiss: <%= auto_dismiss %></li>
    <li>Dismiss After: <%= dismiss_after %></li>
    <li>Dismiss Button: <%= dismiss_button %></li>
  </ul>
</div>

Alert Message Playground

Welcome to the Alert Message Playground! Here you can experiment with different configurations to see how your alert messages will look.

How to Use:

  1. Use the controls in the 'Params' section to customize your alert message.
  2. Watch the preview update in real-time as you make changes.
  3. Experiment with different combinations to find what works best for your app!

Component Usage: In your Rails views, you can use the alert component like this:

<%= rui_alert(title: "Important!", type: :warning) do |c| %>
  <% c.with_message do %>
    Please review your settings.
  <% end %>
<% end %>
Param Description Input

Alert title

Alert message content

Type of alert message

Shape of the alert message

Auto dismiss the alert message

Dismiss after seconds

Dismiss button