views-bootstrap-tab.html.twig in Views Bootstrap 8.3
{{ 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
- {{ 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>