BasicTabComponent
The code defines a software component, specifically a tab component for a web application or site, within a Ruby on Rails environment. This component, named TabComponent, inherits from ApplicationComponent, suggesting it's part of a larger component-based architecture. The TabComponent is designed to display a group of tabs, which are common UI elements used for organizing content into separate views that can be switched between without reloading the page.
In the implementation, the tab system is created using radio input elements for each tab and div elements for the content of each tab. All tabs are part of a group indicated by the shared "name" attribute, ensuring only one tab can be active at a time. The class "tabs tabs-bordered" applied to the tablist suggests a specific visual style, likely defined in an associated stylesheet. The second tab starts as the active tab because it has the "checked" attribute. Additional classes like "tab-content" and "p-10" are likely related to styling the content area of each tab. This setup allows for a basic but effective tabbed interface, where selecting a tab shows its associated content while hiding the others.
# frozen_string_literal: true
# Tabs container component can be modified with:
# shape: tabs-boxed, tabs-bordered, tabs-lifted
# size: tabs-xs, tabs-sm, tabs-md, tabs-lg
# Individual Tab components can be modified with:
# tab-active, tab-disabled
class TabComponent < ApplicationComponent
def template
div(role: "tablist", class: "tabs tabs-bordered") do
input(type: "radio", name: "my_tabs_1", role: "tab", class: "tab", aria_label: "Tab 1")
div(role: "tabpanel", class: "tab-content p-10") { "Tab content 1" }
input(type: "radio", name: "my_tabs_1", role: "tab", class: "tab", aria_label: "Tab 2", checked: true)
div(role: "tabpanel", class: "tab-content p-10") { "Tab content 2" }
input(type: "radio", name: "my_tabs_1", role: "tab", class: "tab", aria_label: "Tab 3")
div(role: "tabpanel", class: "tab-content p-10") { "Tab content 3" }
end
end
end