Class: Shadcn::TabsComponent

Inherits:
BaseComponent show all
Defined in:
app/components/shadcn/tabs_component.rb

Overview

Tabs component for tabbed interfaces Matches shadcn/ui Tabs component Uses Stimulus for interactivity

Examples:

Basic tabs

<%= render Shadcn::TabsComponent.new(default_value: "account") do |tabs| %>
  <% tabs.with_list do |list| %>
    <% list.with_trigger(value: "account") { "Account" } %>
    <% list.with_trigger(value: "password") { "Password" } %>
  <% end %>
  <% tabs.with_panel(value: "account") do %>
    Account settings content
  <% end %>
  <% tabs.with_panel(value: "password") do %>
    Password settings content
  <% end %>
<% end %>

Tabs with URL sync

<%= render Shadcn::TabsComponent.new(default_value: "account", url_param: "tab") do |tabs| %>
  <% tabs.with_list do |list| %>
    <% list.with_trigger(value: "account") { "Account" } %>
    <% list.with_trigger(value: "password") { "Password" } %>
  <% end %>
  <% tabs.with_panel(value: "account") do %>
    Account settings content
  <% end %>
  <% tabs.with_panel(value: "password") do %>
    Password settings content
  <% end %>
<% end %>
# URL will update to ?tab=account or ?tab=password when tabs are clicked

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(default_value: nil, orientation: :horizontal, url_param: nil, **options) ⇒ TabsComponent

Returns a new instance of TabsComponent.

Parameters:

  • default_value (String) (defaults to: nil) —

    The value of the initially active tab

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

    Orientation (:horizontal, :vertical)

  • url_param (String, nil) (defaults to: nil) —

    Query parameter name to sync active tab with URL (e.g., "tab")



48
49
50
51
52
53
 
# File 'app/components/shadcn/tabs_component.rb', line 48

def initialize(default_value: nil, orientation: :horizontal, url_param: nil, **options)
  super(**options)
  @default_value = default_value
  @orientation = orientation
  @url_param = url_param
end