Class: UI::ToggleGroupComponent

Inherits:
ViewComponent::Base
  • Object
show all
Includes:
ToggleGroupBehavior
Defined in:
app/view_components/ui/toggle_group_component.rb

Overview

ToggleGroupComponent - ViewComponent implementation

A container for a set of toggle items that can be toggled on or off. Supports single and multiple selection modes.

Examples:

Basic usage (single selection)

<%= render UI::ToggleGroupComponent.new(type: "single") do %>
  <%= render UI::ItemComponent.new(value: "left") { "Left" } %>
  <%= render UI::ItemComponent.new(value: "center") { "Center" } %>
  <%= render UI::ItemComponent.new(value: "right") { "Right" } %>
<% end %>

Multiple selection

<%= render UI::ToggleGroupComponent.new(
  type: "multiple",
  value: ["bold", "italic"]
) do %>
  <%= render UI::ItemComponent.new(value: "bold") { "Bold" } %>
  <%= render UI::ItemComponent.new(value: "italic") { "Italic" } %>
<% end %>

Instance Method Summary collapse

Methods included from ToggleGroupBehavior

#toggle_group_classes, #toggle_group_html_attributes

Constructor Details

#initialize(type: "single", variant: "default", size: "default", value: nil, spacing: 0, orientation: nil, classes: "", **attributes) ⇒ ToggleGroupComponent

Returns a new instance of ToggleGroupComponent.

Parameters:

  • type (String) (defaults to: "single") —

    Selection mode: “single” or “multiple”

  • variant (String) (defaults to: "default") —

    Visual style variant (default, outline)

  • size (String) (defaults to: "default") —

    Size variant (default, sm, lg)

  • value (String, Array) (defaults to: nil) —

    Current selected value(s)

  • spacing (Integer) (defaults to: 0) —

    Gap between items (0 means items touch)

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

    Layout direction (horizontal, vertical)

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



34
35
36
37
38
39
40
41
42
43
 
# File 'app/view_components/ui/toggle_group_component.rb', line 34

def initialize(type: "single", variant: "default", size: "default", value: nil, spacing: 0, orientation: nil, classes: "", **attributes)
  @type = type
  @variant = variant
  @size = size
  @value = value
  @spacing = spacing
  @orientation = orientation
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#call ⇒ Object 



45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
# File 'app/view_components/ui/toggle_group_component.rb', line 45

def call
  attrs = toggle_group_html_attributes
  attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))

  # Store context for child components
  set_toggle_group_context({
    variant: @variant,
    size: @size,
    type: @type,
    spacing: @spacing,
    value: @value
  })

  content_tag :div, content, **attrs.merge(@attributes.except(:data))
end