a12s-1.0.0-beta7/modules/patterns/templates/patterns/tabs/pattern-tabs.html.twig

{% set default_classes = [
  'tabs',
  variant is not empty ? 'tabs--' ~ variant,
  pattern_variables.tab_alignment,
  pattern_variables.no_gap ? 'no-gap',
  pattern_variables.underlined ? 'underlined',
  pattern_variables.bordered ? 'bordered',
  pattern_variables.shadowed ? 'shadowed',
  pattern_variables.fade ? 'fade',
] %}

{% for index, tab in tabs %}
  {% if active_tab is not defined %}
    {% if tab.active is not empty %}
      {% set active_tab = index %}
    {% endif %}
  {% endif %}
{% endfor %}

{% if active_tab is not defined %}
  {% set active_tab = 0 %}
{% endif %}

{# active_tab may be a Markup, so in this case, we need to convert it #}
{% set active_tab = active_tab|render %}

{% if namespace is empty %}
  {% set namespace = random(10000, 99999) %}
{% endif %}

{% if tabs %}
  <div{{ attributes.addClass(classes|default(default_classes)) }}>
    <ul role="tablist">
      {% for index, tab in tabs %}
        {% set tab_attributes = create_attribute({
          class: ["tab"],
          role: "tab",
          id: "tab-" ~ namespace ~ "-" ~ index,
          "aria-selected": active_tab == index ? "true" : "false",
          "aria-controls": "tab-" ~ namespace ~ "-panel-" ~ index,
          tabindex: index,
        }) %}
        <li>
          <button{{ tab_attributes.addClass(tab.tab_classes|default([])) }}>{{ tab.label }}</button>
        </li>
      {% endfor %}
    </ul>

    <div class="tab-content">
      {% for index, tab in tabs %}
        {% set panel_attributes = create_attribute({
          class: [
            "tab-panel",
            active_tab == index ? "show",
          ],
          id: "tab-" ~ namespace ~ "-panel-" ~ index,
          role: "tabpanel",
          tabindex: index,
          "aria-labelledby": "tab-" ~ namespace ~ "-" ~ index,
        }) %}
        <div{{ panel_attributes.addClass(tab.panel_classes|default([])) }}>
          {{ tab.content }}
        </div>
      {% endfor %}
    </div>
  </div>
{% endif %}