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
<div class="space-y-8">
  <div class="p-4 text-gray-800 bg-gray-100 rounded-lg">
    <h3 class="mb-2 text-lg font-semibold">Single Avatar</h3>
    <div class="relative inline-block md:h-24 md:w-24 h-12 w-12 rounded-full transition duration-500 ease-in-out transform hover:drop-shadow-2xl hover:bg-transparent hover:z-[100] hover:scale-105">
      <a class="block" href="https://github.com/yshmarov">
        <img alt="Yaro Shmarov" title="Yaro Shmarov" class="w-full h-full object-cover rounded-full" src="https://avatars.githubusercontent.com/u/13472945?v=4" />
      </a>
      <span class="absolute bottom-0 right-0 flex items-center justify-center w-3 h-3 rounded-full"></span>
    </div>
  </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>Source: https://avatars.githubusercontent.com/u/13472945?v=4</li>
      <li>Alt: Yaro Shmarov</li>
      <li>Initials: YS</li>
      <li>Size: xl3</li>
      <li>Shape: circle</li>
      <li>Indicator: default</li>
      <li>Ring: default</li>
      <li>URL: https://github.com/yshmarov</li>
      <li>Preview: Disabled</li>
    </ul>
  </div>
</div>
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
<div class="space-y-8">
  <div class="p-4 text-gray-800 bg-gray-100 rounded-lg">
    <h3 class="mb-2 text-lg font-semibold">Single Avatar</h3>
    <%= rui_avatar(
      source: source,
      initials: initials,
      size: size,
      alt: alt,
      shape: shape,
      indicator: indicator,
      ring: ring,
      url: url,
      preview_enabled: preview_enabled,
      preview_title: preview_enabled ? preview_title : "GitHub Profile",
      preview_description: preview_enabled ? preview_description : "View this user's GitHub profile",
      preview_image_url: preview_enabled ? preview_image_url : "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
    ) %>
  </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>Source: <%= source %></li>
      <li>Alt: <%= alt.present? ? alt : "None" %></li>
      <li>Initials: <%= initials.present? ? initials : "None" %></li>
      <li>Size: <%= size %></li>
      <li>Shape: <%= shape %></li>
      <li>Indicator: <%= indicator.present? ? indicator : "None" %></li>
      <li>Ring: <%= ring.present? ? ring : "None" %></li>
      <li>URL: <%= url.present? ? url : "None" %></li>
      <li>Preview: <%= preview_enabled ? "Enabled" : "Disabled" %></li>
      <% if preview_enabled %>
        <li>Preview Title: <%= preview_title %></li>
        <li>Preview Description: <%= preview_description %></li>
        <li>Preview Image URL: <%= preview_image_url %></li>
      <% end %>
    </ul>
  </div>
</div>

🎉 Avatar Component Playground! 🎉

Welcome to the Avatar Component Playground! Here you can experiment with different configurations to see how your avatars will look and behave.

How to Use:

  1. Use the controls in the 'Params' section to customize your avatar.
  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!

Tips:

  • Try different sizes and shapes to see how the avatar appearance changes.
  • Add an indicator to show user status.
  • Enable the preview to see the hover functionality in action.
  • Experiment with badges and stacking options.

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

<%= rui_avatar(source: user.avatar_url, size: :md, indicator: :online) %>
Param Description Input

URL for the avatar image

Initials to display (if no source)

Size of the avatar

Shape of the avatar

Status indicator

Ring color

URL for clickable avatar. Is a required parameter for the preview to work.

Show preview on hover? You must have a URL to enable this.

Preview title

Preview description

Preview image URL