Fluxbit ViewComponents
x
1
2
3
4
5
6
7
<div class="flex gap-0 items-center justify-center flex-nowrap flex-row h-60 border-2">
  <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">Button 1</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">Button 2</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">Button 3</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">Button 4</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">Button 5</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%= fx_flex(
  vertical: vertical,
  reverse: reverse,
  justify_content: justify_content,
  align_items: align_items,
  wrap: wrap,
  wrap_reverse: wrap_reverse,
  gap: gap,
  class: "h-60 border-2") do
%>
  <% (1..5).each do |i| %>
    <%= fx_button(with_content: "Button #{i}") %>
  <% end %>
<% end %>

Fluxbit::FlexComponent

This component is used to render a customizable flex container. It allows you to control the flex direction, alignment, wrapping, gap, and other layout properties. This is useful for creating responsive and dynamic layouts.

Param Description Input

vertical

reverse

wrap

wrap_reverse

Justify Content

Align Items

Gap