Tab Navigation Component example

[tkoenig]

Hi, I am experimenting to build a simple Tab navigation component like the example in https://getbootstrap.com/docs/4.4/components/navs/#javascript-behavior.

What I currently have works, but I am wondering if there are nicer ways to do this:

# tab_component.rb
class TabComponent < ViewComponent::Base
  def tab(target, selected: false)
    content_for(:nav) do
      tag.li(class: 'nav-item') do
        tag.a(class: "nav-link #{'active' if selected}",
              id: "#{target}-tab",
              href: "##{target}",
              role: 'tab',
              aria: { controls: target, selected: selected },
              data: { toggle: 'tab' }) do
          t(target)
        end
      end
    end

    content_for(:tabs) do
      tag.div(class: "tab-pane fade #{'show active' if selected}",
              id: target,
              role: 'tabpanel',
              aria: { labelledby: "#{target}-tab" }) do
        yield
      end
    end
  end
end

<!-- tab_component.html.erb -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <%= content_for :nav %>
</ul>

<div class="tab-content" id="myTabContent">
  <%= content_for :tabs %>
</div>

<!-- edit.html.erb - using the component -->
<%= render TabComponent.new do |t| %>
  <% t.tab(:general) do %>
    Form for general info
  <% end %>
  <% t.tab(:report) do %>
    Form for report
  <% end %>
<% end %>

Issues regarding this approach

Usage of tag helper inside component

I would like to get rid of the tag helpers inside the TabComponent model.

render inside block doesn't work
If I try something like

  <% t.tab(:general) do %>
    <%= render 'form' %>
  <% end %>

the form is not rendered. I think this is related to the usage of content_for?

Can anyone recommend a better way to achieve something like this?

I think this might be also related to #325.

[jonspalmer]

I believe to solve this well we need some of the idea in #325. You'll see in there that TabComponent is actually one of the examples we consider.

I'm not sure what is going wrong with your creative solution. One thought would be that perhaps you need to to capture the block vs just yielding to it. There can be issues we double rendering of content but it might work.

[joelhawksley]

This has long been addressed with Slots ❤️