htmltwigpatternlab.io

patternlab twig drupal8 bootstrap


I have to use a bootstrap tab and then I want to generate the tab links and tab contents dynamically. But each content is inside an organism. Because in my case each tab gone to be paragraph bundle that comes from Drupal back-end. I don't know if there is a way to so. How to include organisms dynamically. I don't just didn't find a work around for this. and of course I can't do if condition because I will have so much cases (tab links and tab contents). Example of code.

<section class="tabs ">
     <div class="container">
      <div class="row">
       <div class="col-12">
        <ul class="nav nav-tabs mx-auto position-relative border-bottom-0 flex-column flex-lg-row justify-content-center pb-0 " id="myTab" role="tablist">
          {% for tab in tabs %}
            <li class="nav-item text-center text-lg-left mx-0  pt-1 px-0 pb-0 pt-lg-2">
              {% include '@atoms/anchor/00-anchor-base.twig' with {anchor: tab, stylemodifier: ''  } %}
            </li>
          {% endfor %}
        </ul>
        <div class="tab-content pt-lg-4 pt-2" id="myTabContent">
          {% for tab in tabs %}
            <div class="tab-pane fade  {{ loop.first ? 'show active' }}" id="{{ tab.controls }}" role="tabpanel" aria-labelledby="{{ tab.controls }}-tab">
               {% include '@organisms/block/11-listing.twig' with { } %}
               {# i want the above organism to be dymin , for example it could be "05-organism-thing.twig" #}
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>


Solution

  • Actually you can do this with views. You just have to filter your content(tabs) based on a taxonomy and to create multiple blocks of the same view, each one based on menu and path under page settings. More info here.

    Alternatively, you could use Quick tabs module.

    I hope that helps.