The Fluxbit::TabComponent is a customizable tab component that extends Fluxbit::Component. It allows you to create tabbed interfaces with multiple variants, colors, and orientations, supporting both standalone tab navigation and full tabbed content panels.

To start using the tab you can use the default way to call the component:

<%= render Fluxbit::TabComponent.new do |tabs| %>
  <%= tabs.with_tab title: "Tab 1", active: true do %>
    Tab 1 content
  <% end %>
  <%= tabs.with_tab title: "Tab 2" do %>
    Tab 2 content  
  <% end %>
<% end %>

or you can use the alias (from the helpers):

<%= fx_tab do |tabs| %>
  <%= tabs.with_tab title: "Tab 1", active: true do %>
    Tab 1 content
  <% end %>
  <%= tabs.with_tab title: "Tab 2" do %>
    Tab 2 content
  <% end %>
<% end %>

The result is:

Options

Param	Default	Description
variant:	:default	Tab variant style (:default, :underline, :pills, :full_width).
color:	:blue	Color theme for active tabs (:blue, :cyan, :green, :indigo, :pink, :purple, :red, :yellow, :gray).
vertical:	false	Display tabs vertically instead of horizontally.
align:	:left	Horizontal alignment of tabs (:left, :center, :right). Only applies to horizontal tabs.
tab_panel:	:default	Panel styling variant (:default, :hidden).
ul_html:	{}	Additional HTML attributes for the tab list container.
remove_class:	””	Classes to be removed from the default class list.
**props		Additional HTML attributes.

Slots

The component supports the following slots:

• with_tab: Add individual tab items. Each tab supports:
  • title: Tab label text (required)
  • active: Whether the tab is initially active (boolean)
  • disabled: Whether the tab is disabled (boolean)
  • icon: Icon to display alongside the title
  • content_html: HTML attributes for the tab panel content
  • li_html: HTML attributes for the tab list item

Examples

Basic tabs

Underline tabs

Pills tabs

Full width tabs

Vertical tabs

Tabs with icons

Different colors

Tabs without panels

Disabled tabs

Tab alignment

Adding/Removing classes

Adding other properties

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:

# /config/initializers/change_tab_component_defaults.rb

Fluxbit::Config::TabComponent.variant = :underline # the default is :default
Fluxbit::Config::TabComponent.color = :green # the default is :blue
Fluxbit::Config::TabComponent.vertical = false # the default is false
Fluxbit::Config::TabComponent.align = :center # the default is :left
Fluxbit::Config::TabComponent.tab_panel = :default # the default is :default
Fluxbit::Config::TabComponent.styles[:tab_list][:variant][:custom] = 'custom-tab-styling' # Custom variant

Dependencies

• Anyicon: Used for rendering tab icons.
• Tailwind CSS: Used for styling the component.
• Flowbite: Used for tab switching functionality.

Styles

<%= html_escape(JSON.pretty_generate(Fluxbit::Config::TabComponent.styles)) %>

References

Flowbite Tabs