Class: DaisyUI::Accordion

Inherits:
BaseComponent show all
Defined in:
app/components/daisy_ui/data_display/accordion.rb

Overview

Renders an accordion component that allows users to show and hide content sections.

Examples:

Basic usage

<%= render(AccordionComponent.new) do |component| %>
  <% component.with_item(title: "Item 1") do %>
    Content for item 1
  <% end %>
  <% component.with_item(title: "Item 2") do %>
    Content for item 2
  <% end %>
<% end %>

With arrow indicator

<%= render(AccordionComponent.new(indicator: :arrow)) do |component| %>
  <% component.with_item(title: "Item 1") do %>
    Content for item 1
  <% end %>
<% end %>

With plus/minus indicator

<%= render(AccordionComponent.new(indicator: :plus)) do |component| %>
  <% component.with_item(title: "Item 1") do %>
    Content for item 1
  <% end %>
<% end %>

Radio group behavior

<%= render(AccordionComponent.new(input_type: :radio)) do |component| %>
  <% component.with_item(title: "Item 1", checked: true) do %>
    Content for item 1
  <% end %>
  <% component.with_item(title: "Item 2") do %>
    Content for item 2
  <% end %>
<% end %>

Joined items without gaps

<%= render(AccordionComponent.new(join: true)) do |component| %>
  <% component.with_item(title: "Item 1") do %>
    Content for item 1
  <% end %>
  <% component.with_item(title: "Item 2") do %>
    Content for item 2
  <% end %>
<% end %>

Custom colors

<%= render(AccordionComponent.new(
  bg_color: "bg-primary",
  text_color: "text-primary-content",
  border_color: "border-primary-focus"
)) do |component| %>
  <% component.with_item(title: "Item 1") do %>
    Content for item 1
  <% end %>
<% end %>

Constant Summary collapse

INDICATORS = 
i[arrow plus].freeze
INPUT_TYPES = 
i[radio checkbox].freeze

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize(join: false, indicator: nil, input_type: :checkbox, bg_color: nil, text_color: nil, border_color: nil, padding: nil, name: nil, **system_arguments) ⇒ Accordion

Returns a new instance of Accordion.

Parameters:

  • join (Boolean) (defaults to: false) —

    Join items together without gaps

  • indicator (Symbol) (defaults to: nil) —

    Type of indicator to show (:arrow, :plus)

  • input_type (Symbol) (defaults to: :checkbox) —

    Type of input to use (:radio, :checkbox)

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

    Background color class

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

    Text color class

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

    Border color class

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

    Padding class

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

    Name for radio/checkbox inputs (auto-generated if nil)

  • system_arguments (Hash) —

    Additional HTML attributes



91
92
93
94
95
96
97
98
99
100
101
102
103
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 91

def initialize(join: false, indicator: nil, input_type: :checkbox,
               bg_color: nil, text_color: nil, border_color: nil,
               padding: nil, name: nil, **system_arguments)
  @join = join
  @indicator = indicator
  @input_type = input_type
  @bg_color = bg_color || 'bg-base-100'
  @text_color = text_color
  @border_color = border_color || 'border border-base-300'
  @padding = padding
  @input_name = name || "accordion-#{SecureRandom.uuid}"
  super(**system_arguments)
end

Instance Attribute Details

#bg_color ⇒ Object (readonly)

Returns the value of attribute bg_color.



80
81
82
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 80

def bg_color
  @bg_color
end

#border_color ⇒ Object (readonly)

Returns the value of attribute border_color.



80
81
82
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 80

def border_color
  @border_color
end

#indicator ⇒ Object (readonly)

Returns the value of attribute indicator.



80
81
82
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 80

def indicator
  @indicator
end

#input_type ⇒ Object (readonly)

Returns the value of attribute input_type.



80
81
82
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 80

def input_type
  @input_type
end

#join ⇒ Object (readonly)

Returns the value of attribute join.



80
81
82
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 80

def join
  @join
end

#padding ⇒ Object (readonly)

Returns the value of attribute padding.



80
81
82
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 80

def padding
  @padding
end

#text_color ⇒ Object (readonly)

Returns the value of attribute text_color.



80
81
82
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 80

def text_color
  @text_color
end

Instance Method Details

#call ⇒ Object 



105
106
107
108
109
110
111
 
# File 'app/components/daisy_ui/data_display/accordion.rb', line 105

def call
  return safe_join(items || []) unless @join

  tag.div(**html_attributes) do
    safe_join(items || [])
  end
end