Portfolio - Components

View All Components

Component: Tabs

Features:

  1. User defined tabs
  2. Add tab position and theme
  3. dynamic ids applied

Notes:

  1. tab title position matched with tab content position. 1 with 1...
  2. Inner loop with keys


 

Watch Short Video

Tabs

Heading

Text 123 sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text 

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text 

Text 2222

Heading

Text 123 sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text 

sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text 

Text 2222

paragraph--tabs-repeater.html.twig

 
{% set theme = paragraph.field_theme_color.value %}

{% set pos = paragraph.field_tab_position.value %}


{% block paragraph %}

    {% block content %}

<div class="row">

	<div class="col">

      {% if pos == "vertical" %}

      <div class="tabs tabs-{{ theme }} tabs-vertical tabs-left">

      {% else %}

      <div class="tabs tabs-{{ theme }}">

      {% endif %}

	{% if pos == "left" %}

        <ul class="nav nav-tabs" role="tablist">

        {% elseif pos == "right" %}

        <ul class="nav nav-tabs justify-content-end">

        {% elseif pos == "vertical" %}

        <ul class="nav nav-tabs">

        {% else %}

        <ul class="nav nav-tabs nav-justified flex-column flex-md-row">

      {% endif %}

    {% for key, item in content.field_tabs_repeater %}

        {% if key|first != "#" %}

        <li class="nav-item">

        <a class="nav-link {% if key == 0 %}active{% endif %}" href="#ref{{ paragraph.index }}-{{ key }}" {% if pos == "vertical" and key == 0 %}style="border-left-color: var(--{{ theme }});"{% endif %} data-bs-toggle="tab" aria-selected="true" role="tab">{{ item['#paragraph'].field_tab_title[0].value|raw }}</a>

        </li>

        {% endif %}

    {% endfor %}

	</ul>

        <div class="tab-content">

      {% for key, item in content.field_tabs_repeater %}

          {% if key|first != "#" %}

          <div id="ref{{ paragraph.index }}-{{ key }}" class="tab-pane {% if key == 0 %}active{% endif %}">

            {{ item['#paragraph'].field_tab_text[0].value|raw }}

          </div>

          {% endif %}

      {% endfor %}

        </div>

	</div>

	</div>

</div>

    {% endblock %}

{% endblock paragraph %}