templates/navigation/tabs.html.twig line 1

Open in your IDE?
  1. {% set dropdownOnMobile = true %}
  2. <ul class="nav {{ dropdownOnMobile ? 'd-md-flex d-none' : '' }} list-unstyled tabbing-animations-wrapper js-tabbing-animations-wrapper custom-scrollbar nav-tabs {{ className|default('') }}" {% if isTabbing|default(false) %}role="tablist"{% endif %}>
  3.     {% for tab in items|default([]) %}
  4.         <li class="nav-item js-tabbing-slider-nav-item">
  5.             <a class="nav-link js-tabbing-animations-link {{ tab.isActive ? 'js-tabbing-animations-link-active': '' }} {{ tab.isActive ? 'active': '' }} {{ isDynamicTabbing|default(false) ? 'js-dynamic-tabbing__toggle' : ''}}"
  6.                data-content-url="{{ tab.contentUrl }}"
  8.                 {% if tab.isActive %}aria-current="page"{% endif %}
  9.                 {% if tab.id is defined %}id="{{ tab.id }}"{% endif %}
  10.                 {% if isTabbing|default(false) %}
  11.                     href="#{{ tab.targetId }}"
  12.                     data-bs-toggle="tab"
  13.                     data-height="false"
  14.                     role="tab"
  15.                     aria-controls="{{ tab.targetId }}"
  16.                     aria-selected="{{ tab.isActive ? 'true': 'false' }}"
  17.                 {% else %}
  18.                     href="{{ tab.href }}"
  19.                 {% endif %}>
  20.                 {{ tab.text|raw }}
  21.                 {% if tab.warnings|default([])|length > 0 %}
  22.                     <span class="facilities-warnings__dot d-none d-md-inline-block"></span>
  23.                 {% endif %}
  24.             </a>
  26.         </li>
  27.     {% endfor %}
  28.     <div class="tabbing-animations-indicator js-tabbing-animations-indicator"></div>
  29. </ul>
  31. {% if dropdownOnMobile %}
  32.     {% set activeOption = ''  %}
  34.     <div class="dropdown mb-4 d-md-none js-tabbing-dropdown px-0">
  35.         <span class="fz16">{{ 'tabbing.dropdown.select'|trans }}:</span>
  36.         <ul class="dropdown-menu nav tabbing-dropdown">
  37.             {% for tab in items|default([]) %}
  38.                 {% if tab.isActive %}
  39.                     {% set activeOption = tab.text|raw  %}
  40.                 {% endif %}
  41.                 <li class="dropdown-item nav-item p-0">
  42.                     <a class="nav-link tabbing-dropdown__item js-tabbing-dropdown__item {{ tab.isActive ? 'active': '' }} {{ isDynamicTabbing|default(false) ? 'js-dynamic-tabbing__toggle' : ''}}"
  43.                        data-content-url="{{ tab.contentUrl }}"
  45.                        {% if tab.isActive %}aria-current="page"{% endif %}
  46.                         {% if tab.id is defined %}id="{{ tab.id }}"{% endif %}
  47.                         {% if isTabbing|default(false) %}
  48.                         href="#{{ tab.targetId }}"
  49.                         data-bs-toggle="tab"
  50.                         data-height="false"
  51.                         role="tab"
  52.                         aria-controls="{{ tab.targetId }}"
  53.                         aria-selected="{{ tab.isActive ? 'true': 'false' }}"
  54.                     {% else %}
  55.                         href="{{ tab.href }}"
  56.                         {% endif %}>
  57.                         {{ tab.text|raw }}
  58.                     </a>
  59.                 </li>
  60.             {% endfor %}
  61.         </ul>
  63.         <button class="btn btn-outline dropdown-toggle js-tabbing-dropdown__active-item tabbing-dropdown__button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
  64.             {{ activeOption }}
  65.         </button>
  66.     </div>
  67. {% endif %}