Fluxbit ViewComponents
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
<div class="flex flex-col w-full items-center">
  <button class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-sm p-1.5 relative inline-flex mr-2 mb-5 w-36" popover_placement="top" data-popover-placement="top" data-popover-target="ugcjmqpsof_target">
    User Profile</b></i>
</button>
<div id="ugcjmqpsof_target" data-popover="data-popover" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-xs opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 w-48">
  <div class="px-3 py-2">      
    <div class="flex items-center justify-between mb-2">
      <a href="#">
        <img src="https://secure.gravatar.com/avatar/3d0fef8d3478a29c5a5ea6ee3643db24.png?d=robohash&r=pg&s=50" class="rounded-full w-10 h-10 bg-gray-200 dark:bg-gray-600"></img>
    </a>
    <div>
      <button class="text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden rounded-lg text-xs p-1">Folow</button>
    </div>
  </div>
  <p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
    <a href="#">Arthur Molina</a>
  </p>
  <p class="mb-3 text-sm font-normal">
    <a href="#" class="hover:underline">@arthurmolina</a>
  </p>
  <p class="mb-4 text-sm">Open-source contributor. Building <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">fluxbit</a>.</p>
  <ul class="flex text-sm">
    <li class="me-2">
      <a href="#" class="hover:underline">
        <span class="font-semibold text-gray-900 dark:text-white">799</span>
        <span>Following</span>
      </a>
    </li>
    <li>
      <a href="#" class="hover:underline">
        <span class="font-semibold text-gray-900 dark:text-white">3,758</span>
        <span>Followers</span>
      </a>
    </li>
  </ul>
</div>
<div data-popper-arrow="true"></div>
</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
<div class="flex flex-col w-full items-center">
  <%= fx_button(class: 'relative inline-flex mr-2 mb-5 w-36', popover_placement: :top) do |button| %>
    <% button.with_popover do %>
      <div class="flex items-center justify-between mb-2">
        <a href="#">
          <%= fx_gravatar(email: 'arthurmolina@gmail.com') %>
        </a>
        <div>
          <%= fx_button(size: 0, with_content: 'Folow') %>
        </div>
      </div>
      <p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
        <a href="#">Arthur Molina</a>
      </p>
      <p class="mb-3 text-sm font-normal">
        <a href="#" class="hover:underline">@arthurmolina</a>
      </p>
      <p class="mb-4 text-sm">Open-source contributor. Building <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">fluxbit</a>.</p>
      <ul class="flex text-sm">
        <li class="me-2">
          <a href="#" class="hover:underline">
            <span class="font-semibold text-gray-900 dark:text-white">799</span>
            <span>Following</span>
          </a>
        </li>
        <li>
          <a href="#" class="hover:underline">
            <span class="font-semibold text-gray-900 dark:text-white">3,758</span>
            <span>Followers</span>
          </a>
        </li>
      </ul>
    <% end %>
    User Profile</b></i>
  <% end %>
</div>

No notes provided.

No params configured.