Fluxbit ViewComponents
x
1
2
3
4
5
<div class="inline-flex rounded-md shadow-xs"><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 flex items-stretch items-center transition-all duration-200 rounded-r-none">    A
</button><button class="text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900 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 flex items-stretch items-center transition-all duration-200 rounded-none">    B
</button><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 flex items-stretch items-center transition-all duration-200 rounded-none">    C
</button><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 flex items-stretch items-center transition-all duration-200 rounded-l-none">    D
</button></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%= fx_button_group do |group| %>
  <% group.with_button(color: :default) do %>
    A
  <% end %>
  <% group.with_button(color: :failure) do %>
    B
  <% end %>
  <% group.with_button(color: :default) do %>
    C
  <% end %>
  <% group.with_button(color: :default) do %>
    D
  <% end %>
<% end %>

No notes provided.

No params configured.