Contents

# frozen_string_literal: true

module Yattho
  module Alpha
    # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
    # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Yattho::Alpha::TabNav) %>.
    #
    # This component requires javascript.
    class TabContainer < Yattho::Component
      # @example Default
      #   <%= render(Yattho::Alpha::TabContainer.new)  do %>
      #     <div role="tablist">
      #       <button type="button" role="tab" aria-selected="true">Tab one</button>
      #       <button type="button" role="tab" tabindex="-1">Tab two</button>
      #       <button type="button" role="tab" tabindex="-1">Tab three</button>
      #     </div>
      #     <div role="tabpanel">
      #       Panel 1
      #     </div>
      #     <div role="tabpanel" hidden>
      #       Panel 2
      #     </div>
      #     <div role="tabpanel" hidden>
      #       Panel 3
      #     </div>
      #   <% end %>
      #
      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
      def initialize(**system_arguments)
        @system_arguments = deny_tag_argument(**system_arguments)
        @system_arguments[:tag] = "tab-container"
      end

      def call
        render(Yattho::BaseComponent.new(**@system_arguments)) { content }
      end

      def render?
        content.present?
      end
    end
  end
end

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
yattho_view_components-0.1.1	app/components/yattho/alpha/tab_container.rb
yattho_view_components-0.0.1	app/components/yattho/alpha/tab_container.rb