Tabs

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

CLI

Run the following command in your terminal

bundle exec essence add tabs

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 initialize_default_attributes
    {
      data: {
        controller: "essence--tabs",
        essence__tabs_active_value: "panel-general"
      }
    }
  end
end