You are here

views-bootstrap-tab.html.twig in Views Bootstrap 8.3

Same filename and directory in other branches
  1. 8.4 templates/views-bootstrap-tab.html.twig
{{ attach_library('views_bootstrap/tabs') }}
{% set wrapper_classes = ['views-bootstrap-tabs'] %}
{% set option_classes = ['nav'] %}
{% set option_classes = option_classes|merge(['nav-' ~ tab_type]) %}
{% if tab_position == 'justified' or tab_position == 'stacked' %}
  {% set option_classes = option_classes|merge(['nav-' ~ tab_position]) %}
{% elseif tab_position != 'basic' %}
  {% set wrapper_classes = ['tabs-' ~ tab_position] %}
{% endif %}
{% set tabid = 'views-bootstrap-tab-' ~ id %}
{% set tabs_html %}
<ul{{ create_attribute({'class': option_classes, 'role': 'tablist'}) }}>
  {% set attributes = create_attribute() %}
  {% for key, tab in tabs %}
    {% if loop.first %}
      {% set attributes = attributes.addClass('active') %}
    {% else %}
      {% set attributes = attributes.removeClass('active') %}
    {% endif %}
    {% set tab_id = "tab-" ~ tabid ~ '-' ~ key %}
    <li{{ attributes.setAttribute('role', 'presentation') }}><a href="#{{ tab_id }}" aria-controls="{{ tab_id }}" role="tab" data-toggle="tab">{{ tab }}</a></li>
  {% endfor %}
</ul>
{% endset %}
{% if group_title %}<h3>{{ group_title }}</h3>{% endif %}
<div{{ create_attribute({'class': wrapper_classes}) }}>
  {% if tab_position != 'below' %}
    {{ tabs_html }}
  {% endif %}
  {% set tabs_attributes = create_attribute({'class': 'tab-pane'}) %}
  {% if tab_fade == 'fade' %}
    {% set tabs_attributes = tabs_attributes.addClass('fade') %}
  {% endif %}

  <div{{ create_attribute({'class': 'tab-content'}) }}>
    {% for key, row in rows %}
      {% if loop.first %}
        {% set tabs_attributes = tabs_attributes.addClass('active') %}
        {% if tab_fade == 'fade' %}
          {% set tabs_attributes = tabs_attributes.addClass('in') %}
        {% endif %}
      {% else %}
        {% set tabs_attributes = tabs_attributes.removeClass('active') %}
      {% endif %}
      <div{{ tabs_attributes.setAttribute('id', "tab-" ~ tabid ~ '-' ~ key).setAttribute('role', 'tabpanel') }}>
        {{ row.content }}
      </div>
    {% endfor %}
  </div>
  {% if tab_position == 'below' %}
    {{ tabs_html }}
  {% endif %}
</div>

File

templates/views-bootstrap-tab.html.twig
View source
  1. {{ attach_library('views_bootstrap/tabs') }}
  2. {% set wrapper_classes = ['views-bootstrap-tabs'] %}
  3. {% set option_classes = ['nav'] %}
  4. {% set option_classes = option_classes|merge(['nav-' ~ tab_type]) %}
  5. {% if tab_position == 'justified' or tab_position == 'stacked' %}
  6. {% set option_classes = option_classes|merge(['nav-' ~ tab_position]) %}
  7. {% elseif tab_position != 'basic' %}
  8. {% set wrapper_classes = ['tabs-' ~ tab_position] %}
  9. {% endif %}
  10. {% set tabid = 'views-bootstrap-tab-' ~ id %}
  11. {% set tabs_html %}
  12. <ul{{ create_attribute({'class': option_classes, 'role': 'tablist'}) }}>
  13. {% set attributes = create_attribute() %}
  14. {% for key, tab in tabs %}
  15. {% if loop.first %}
  16. {% set attributes = attributes.addClass('active') %}
  17. {% else %}
  18. {% set attributes = attributes.removeClass('active') %}
  19. {% endif %}
  20. {% set tab_id = "tab-" ~ tabid ~ '-' ~ key %}
  21. <li{{ attributes.setAttribute('role', 'presentation') }}><a href="#{{ tab_id }}" aria-controls="{{ tab_id }}" role="tab" data-toggle="tab">{{ tab }}</a></li>
  22. {% endfor %}
  23. </ul>
  24. {% endset %}
  25. {% if group_title %}<h3>{{ group_title }}</h3>{% endif %}
  26. <div{{ create_attribute({'class': wrapper_classes}) }}>
  27. {% if tab_position != 'below' %}
  28. {{ tabs_html }}
  29. {% endif %}
  30. {% set tabs_attributes = create_attribute({'class': 'tab-pane'}) %}
  31. {% if tab_fade == 'fade' %}
  32. {% set tabs_attributes = tabs_attributes.addClass('fade') %}
  33. {% endif %}
  34. <div{{ create_attribute({'class': 'tab-content'}) }}>
  35. {% for key, row in rows %}
  36. {% if loop.first %}
  37. {% set tabs_attributes = tabs_attributes.addClass('active') %}
  38. {% if tab_fade == 'fade' %}
  39. {% set tabs_attributes = tabs_attributes.addClass('in') %}
  40. {% endif %}
  41. {% else %}
  42. {% set tabs_attributes = tabs_attributes.removeClass('active') %}
  43. {% endif %}
  44. <div{{ tabs_attributes.setAttribute('id', "tab-" ~ tabid ~ '-' ~ key).setAttribute('role', 'tabpanel') }}>
  45. {{ row.content }}
  46. </div>
  47. {% endfor %}
  48. </div>
  49. {% if tab_position == 'below' %}
  50. {{ tabs_html }}
  51. {% endif %}
  52. </div>