Class: UI::ButtonGroup

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

Overview

ButtonGroup - Phlex implementation

A container that groups related buttons together with consistent styling. Uses ButtonGroupBehavior module for shared styling logic.

Based on shadcn/ui ButtonGroup: ui.shadcn.com/docs/components/button-group

Examples:

Horizontal button group (default)

render UI::ButtonGroup.new do
  render UI::Button.new(variant: :outline) { "Button 1" }
  render UI::Button.new(variant: :outline) { "Button 2" }
end

Vertical button group

render UI::ButtonGroup.new(orientation: :vertical) do
  render UI::Button.new(variant: :outline, size: :icon) { "+" }
  render UI::Button.new(variant: :outline, size: :icon) { "-" }
end

Nested button groups

render UI::ButtonGroup.new do
  render UI::ButtonGroup.new do
    render UI::Button.new(variant: :outline) { "1" }
    render UI::Button.new(variant: :outline) { "2" }
  end
  render UI::ButtonGroup.new do
    render UI::Button.new(variant: :outline) { "Previous" }
    render UI::Button.new(variant: :outline) { "Next" }
  end
end

Instance Method Summary collapse

Methods included from ButtonGroupBehavior

#button_group_classes, #button_group_html_attributes

Constructor Details

#initialize(orientation: :horizontal, classes: "", **attributes) ⇒ ButtonGroup

Returns a new instance of ButtonGroup.

Parameters:

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

    Direction of the button group (:horizontal, :vertical)

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

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



39
40
41
42
43
 
# File 'app/components/ui/button_group.rb', line 39

def initialize(orientation: :horizontal, classes: "", **attributes)
  @orientation = orientation
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template(&block) ⇒ Object 



45
46
47
 
# File 'app/components/ui/button_group.rb', line 45

def view_template(&block)
  div(**button_group_html_attributes.deep_merge(@attributes), &block)
end