Class: UI::Accordion

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

Overview

Accordion container component (Phlex) Wraps collapsible accordion items with Stimulus controller

Examples:

Basic usage

render UI::Accordion.new do
  render UI::Item.new(value: "item-1") do
    render UI::Trigger.new { "Is it accessible?" }
    render UI::Content.new { "Yes. It adheres to the WAI-ARIA design pattern." }
  end
end

Multiple items open

render UI::Accordion.new(type: "multiple") do
  # Multiple items can be open at once
end

Instance Method Summary collapse

Methods included from AccordionBehavior

#accordion_data_attributes, #accordion_html_attributes, #merged_data_attributes

Constructor Details

#initialize(type: "single", collapsible: false, classes: "", attributes: {}) ⇒ Accordion

Returns a new instance of Accordion.

Parameters:

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

    “single” (only one item open at a time) or “multiple” (multiple items can be open)

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

    whether the open item can be collapsed in “single” mode

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

    additional CSS classes

  • attributes (Hash) (defaults to: {}) —

    additional HTML attributes



25
26
27
28
29
30
31
 
# File 'app/components/ui/accordion.rb', line 25

def initialize(type: "single", collapsible: false, classes: "", attributes: {}, **)
  @type = type
  @collapsible = collapsible
  @classes = classes
  @attributes = attributes
  super()
end

Instance Method Details

#view_template(&block) ⇒ Object 



33
34
35
 
# File 'app/components/ui/accordion.rb', line 33

def view_template(&block)
  div(**accordion_html_attributes, &block)
end