Class: UI::ToggleGroup

Inherits:
Phlex::HTML
  • Object
show all
Includes:
ToggleGroupBehavior
Defined in:
app/components/ui/toggle_group.rb

Overview

ToggleGroup - Phlex 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::ToggleGroup.new(type: "single") do
  render UI::Item.new(value: "left") { "Left" }
  render UI::Item.new(value: "center") { "Center" }
  render UI::Item.new(value: "right") { "Right" }
end

Multiple selection

render UI::ToggleGroup.new(type: "multiple", value: ["bold", "italic"]) do
  render UI::Item.new(value: "bold") { "Bold" }
  render UI::Item.new(value: "italic") { "Italic" }
end

Instance Attribute Summary collapse

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) ⇒ ToggleGroup

Returns a new instance of ToggleGroup.

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



31
32
33
34
35
36
37
38
39
40
 
# File 'app/components/ui/toggle_group.rb', line 31

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 Attribute Details

#context ⇒ Object (readonly)

Accessor for child components to get parent context



63
64
65
 
# File 'app/components/ui/toggle_group.rb', line 63

def context
  @context
end

Instance Method Details

#view_template(&block) ⇒ Object 



42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
# File 'app/components/ui/toggle_group.rb', line 42

def view_template(&block)
  div(**toggle_group_html_attributes.deep_merge(@attributes)) do
    # Store context for child items to access via thread-local
    # This works across both Phlex internal render and Rails render calls
    @context = {
      variant: @variant,
      size: @size,
      type: @type,
      spacing: @spacing,
      value: @value
    }
    Thread.current[:ui_toggle_group_context] = @context
    begin
      yield if block_given?
    ensure
      Thread.current[:ui_toggle_group_context] = nil
    end
  end
end