Class: Shadcn::ButtonGroupComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/button_group_component.rb

Overview

Button Group component for grouping related buttons Matches shadcn/ui Button Group pattern

Examples:

Basic button group

<%= render Shadcn::ButtonGroupComponent.new do |group| %>
  <% group.with_button(variant: :outline) { "Left" } %>
  <% group.with_button(variant: :outline) { "Center" } %>
  <% group.with_button(variant: :outline) { "Right" } %>
<% end %>

With different variants

<%= render Shadcn::ButtonGroupComponent.new do |group| %>
  <% group.with_button { "Save" } %>
  <% group.with_button(variant: :outline) { "Cancel" } %>
<% end %>

Vertical orientation

<%= render Shadcn::ButtonGroupComponent.new(orientation: :vertical) do |group| %>
  <% group.with_button(variant: :outline) { "Top" } %>
  <% group.with_button(variant: :outline) { "Middle" } %>
  <% group.with_button(variant: :outline) { "Bottom" } %>
<% end %>

Constant Summary collapse

ORIENTATIONS =
{
  horizontal: "flex-row",
  vertical: "flex-col"
}.freeze
BASE_CLASSES =
"inline-flex"

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(orientation: :horizontal, **options) ⇒ ButtonGroupComponent

Returns a new instance of ButtonGroupComponent.

Parameters:

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

    Layout orientation (:horizontal, :vertical)



47
48
49
50
# File 'app/components/shadcn/button_group_component.rb', line 47

def initialize(orientation: :horizontal, **options)
  super(**options)
  @orientation = orientation.to_sym
end

Instance Method Details

#callObject



52
53
54
55
56
# File 'app/components/shadcn/button_group_component.rb', line 52

def call
  tag.div(class: group_classes, role: "group", **html_options.merge(build_data)) do
    safe_join(buttons)
  end
end