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
38
39
40
41
<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" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6 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>
      <circle cx="12" cy="12" r="10"></circle>
      <path d="M12 16v-4"></path>
      <path d="M12 8h.01"></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 xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-circle-x icon-desc-circle-x"><title id="icon-title-circle-x">Circle-x</title>
      <desc id="icon-desc-circle-x">Circle-x icon</desc>
      <circle cx="12" cy="12" r="10"></circle>
      <path d="m15 9-6 6"></path>
      <path d="m9 9 6 6"></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