RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="p-4 bg-gray-100 rounded-lg">
  <div class="relative inline-block"><a href="earth.com" class="cursor-pointer transition-colors duration-300 inline-flex items-center gap-1 transition-colors duration-200 underline text-base text-neutral-600 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200">
      Earth Link
    </a></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>URL: earth.com</li>
    <li>Style: default</li>
    <li>External: false</li>
    <li>No Underline: false</li>
    <li>Icon: None</li>
    <li>Preview: Disabled</li>
    <li>Ref: </li>
  </ul>
</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
<div class="p-4 bg-gray-100 rounded-lg">
  <%= rui_link(
    url: url,
    style: style,
    external: external,
    no_underline: no_underline,
    ref: ref
  ) do |component| %>
    <% if icon.present? %>
      <% component.with_icon(name: icon, classes: "w-4 h-4 mr-1") %>
    <% end %>
    <% if preview %>
      <% component.with_preview(**preview_data) %>
    <% end %>
    <%= text %>
  <% end %>
</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>URL: <%= url %></li>
    <li>Style: <%= style %></li>
    <li>External: <%= external %></li>
    <li>No Underline: <%= no_underline %></li>
    <li>Icon: <%= icon.present? ? icon : "None" %></li>
    <li>Preview: <%= preview ? "Enabled" : "Disabled" %></li>
    <li>Ref: <%= ref %></li>
  </ul>
</div>

🎉 Link Component Playground! 🎉

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

How to Use:

  1. Use the controls in the 'Params' section to customize your link.
  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 styles to see how the link appearance changes.
  • Toggle external to see how it affects the link behavior.
  • Add an icon to see how it integrates with the link text.
  • Enable the preview to see the hover functionality in action.

Component Usage:

In your Rails views, you can use the link component like this:

<%= render(RapidRailsUI::LinkComponent.new(url: "/path", style: :primary, icon: "envelope")) { "Link Text" } %>