Module: BetterUi::General::Components::Tabs::TabsHelper

Included in:
ApplicationHelper
Defined in:
app/helpers/better_ui/general/components/tabs/tabs_helper.rb

Instance Method Summary collapse

Instance Method Details

#bui_tabs(variant: :pills, theme: :default, size: :medium, orientation: :horizontal, navigation_classes: '', panels_classes: 'mt-4', **options, &block) ⇒ String

Crea un sistema completo di tabs con navigazione e panel inclusi

Examples:

Uso base con slots

<%= bui_tabs do |tabs| %>
  <% tabs.with_navigation do %>
    <%= bui_tab(text: "Tab 1", target: "tab1", active: true) %>
    <%= bui_tab(text: "Tab 2", target: "tab2") %>
  <% end %>
  <% tabs.with_panels do %>
    <%= bui_tab_panel(id: "tab1", active: true) do %>
      Contenuto del primo pannello
    <% end %>
    <%= bui_tab_panel(id: "tab2") do %>
      Contenuto del secondo pannello
    <% end %>
  <% end %>
<% end %>

Con temi e dimensioni

<%= bui_tabs(variant: :underline, theme: :blue, size: :large) do |tabs| %>
  <% tabs.with_navigation do %>
    <%= bui_tab(text: "Dashboard", target: "dashboard", active: true, icon: "chart-bar") %>
    <%= bui_tab(text: "Impostazioni", target: "settings", icon: "cog-6-tooth") %>
  <% end %>
  <% tabs.with_panels do %>
    <%= bui_tab_panel(id: "dashboard", active: true) do %>
      Dashboard content...
    <% end %>
    <%= bui_tab_panel(id: "settings") do %>
      Settings content...
    <% end %>
  <% end %>
<% end %>

Tabs verticali

<%= bui_tabs(orientation: :vertical, variant: :pills) do |tabs| %>
  <% tabs.with_navigation do %>
    <%= bui_tab(text: "Profilo", target: "profile", active: true) %>
    <%= bui_tab(text: "Account", target: "account") %>
  <% end %>
  <% tabs.with_panels do %>
    <%= bui_tab_panel(id: "profile", active: true) do %>
      Informazioni profilo...
    <% end %>
    <%= bui_tab_panel(id: "account") do %>
      Impostazioni account...
    <% end %>
  <% end %>
<% end %>

Con classi personalizzate

<%= bui_tabs(navigation_classes: "border-b-2", panels_classes: "p-6 bg-gray-50") do |tabs| %>
  <% tabs.with_navigation do %>
    <%= bui_tab(text: "Home", target: "home", active: true) %>
  <% end %>
  <% tabs.with_panels do %>
    <%= bui_tab_panel(id: "home", active: true) do %>
      Home content with custom styling...
    <% end %>
  <% end %>
<% end %>

Parameters:

  • variant (Symbol) (defaults to: :pills) —

    lo stile delle tabs (:pills, :underline, :bordered, :minimal)

  • theme (Symbol) (defaults to: :default) —

    il tema di colore delle tabs (:default, :blue, :red, :green, :yellow, :violet, :orange, :rose, :white)

  • size (Symbol) (defaults to: :medium) —

    la dimensione delle tabs (:small, :medium, :large)

  • orientation (Symbol) (defaults to: :horizontal) —

    l’orientamento delle tabs (:horizontal, :vertical)

  • navigation_classes (String) (defaults to: '') —

    classi CSS aggiuntive per la navigazione

  • panels_classes (String) (defaults to: 'mt-4') —

    classi CSS aggiuntive per i panel (default: ‘mt-4’)

  • options (Hash) —

    attributi HTML aggiuntivi da applicare all’elemento wrapper

  • block (Proc) —

    il contenuto che definisce navigation e panels tramite slots

Returns:

  • (String) —

    l’HTML completo del sistema tabs



79
80
81
82
83
84
85
86
87
88
89
90
 
# File 'app/helpers/better_ui/general/components/tabs/tabs_helper.rb', line 79

def bui_tabs(variant: :pills, theme: :default, size: :medium, orientation: :horizontal, 
            navigation_classes: '', panels_classes: 'mt-4', **options, &block)
  render BetterUi::General::Tabs::Component.new(
    variant: variant,
    theme: theme,
    size: size,
    orientation: orientation,
    navigation_classes: navigation_classes,
    panels_classes: panels_classes,
    **options
  ), &block
end