Tabs

Renders a tabs element

General

Features

Testimonials

render Tabs.new do |tabs|
  tabs.menu do
    tabs.tab(key: :general) { "General" }
    tabs.tab(key: :features) { "Features" }
    tabs.tab(key: :testimonials) { "Testimonials" }
  end
  tabs.panel(key: :general) { p { "General" } }
  tabs.panel(key: :features) { p { "Features" } }
  tabs.panel(key: :testimonials) { p { "Testimonials" } }
end

Installation

Add the component to your project

Manually

Copy and paste the following code into your project

# frozen_string_literal: true

class Components::Tabs < Components::Essence
  BASE = "rounded-lg overflow-hidden"
  TAB_BASE = "inline-flex items-center justify-center w-fit rounded-xs border border-transparent font-medium transition duration-150 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90 text-xs px-3 py-2 gap-1.5 text-gray-900 bg-transparent hover:bg-gray-200 hover:text-gray-800"
  TAB_LIST_BASE = "flex items-center gap-2 py-2 border-b"
  PANEL_BASE = "aria-hidden:hidden p-4"


  def initialize(**attributes)
    super(**attributes)
  end

  def view_template(&)
    div(**attributes, &)
  end

  def menu(**mattributes, &)
    mattributes[:class] = merge_classes([ TAB_LIST_BASE, mattributes[:class] ])

    div(**mattributes, &)
  end

  def tab(key: :general, **mattributes, &)
    mattributes[:id] = "tab-#{key}"
    mattributes[:class] = merge_classes([ TAB_BASE, mattributes[:class] ])
    mattributes[:data] = {
      essence__tabs_target: "tab",
      essence__tabs_panel_id_param: "panel-#{key}",
      action: "essence--tabs#setActiveTab keydown.left->essence--tabs#previous keydown.right->essence--tabs#next"
    }

    button(**mattributes, &)
  end

  def panel(key: :general, **mattributes, &)
    mattributes[:id] = "panel-#{key}"
    mattributes[:class] = merge_classes([ PANEL_BASE, mattributes[:class] ])
    mattributes[:data] = {
      essence__tabs_target: "panel"
    }

    div(**mattributes, &)
  end

  private

  def initialize_merged_classes = merge_classes([ BASE, attributes[:class] ])

  def default_attributes
    {
      data: {
        controller: "essence--tabs",
        essence__tabs_active_value: "panel-general"
      }
    }
  end
end