logo

FocusableCollapsibleComponentWithIcon

InfoGeneratePackages

The code snippet shows the definition of a Ruby class named CollapseWithIconComponent, which inherits from a class named ApplicationComponent. It contains a single method, template, that defines the structure of a UI component using a series of nested div elements. This UI component is designed to be a collapsible section, indicated by the use of class names such as 'collapse' and 'collapse-arrow'. The first div acts as the container with a border, background, and is focusable due to the tabindex attribute. Inside this container, there are two divs: one serves as the title of the collapsible section, styled with larger text and medium font weight, and the second div contains the content of the collapsible section, which is a paragraph explaining the importance of the tabindex attribute for focusability. This code is likely part of a web application's frontend, utilizing a Ruby-based framework to generate HTML for a collapsible component.

# frozen_string_literal: true

class CollapseWithIconComponent < ApplicationComponent
  def template
    div(class: "collapse collapse-arrow border border-base-300 bg-base-200", tabindex: 0) do
      div(class: "collapse-title text-xl font-medium") { "Focus me to see content" }
      div(class: "collapse-content") do
        p { "tabindex=\"0\" attribute is necessary to make the div focusable" }
      end
    end
  end
end

Children