Bootstrap Tabs Macro

tabs.njx

{#
  * Import
  * {% import 'components.njx' as component %}
#}

{#
  * Tabs (using bootstrap)
  * Build out a bootstrap navigation and a tab content area
  * @param {array} tabs = ['tab1', 'tab2', etc] | builds out nav using array values as ids and the text for that nav item
  * @param {int} active = 1 | index of tab nav item that will be active
  * @param {array} (optional) classes = ['hidden-xs', 'hidden-sm' ] | adds additional classes to the tab nav container
  *
  * Usage
  * {% call component.tabs(['Tab 1', 'Tab 2'], active = 1, classes=['hidden-xs']) %}
  *   <!-- tabpane macro used here -->
  * {% endcall %}
  *
  * Outputs
  * <ul class="nav nav-tabs hidden-xs">
  *   <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li>
  *   <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li>
  * </ul>
  * <div class="tab-content"> <!-- tab panes go here --> </div>
#}

{% macro tabs(tabs = ['tab 1'], active = 1, classes=[]) %}
  <ul class="nav nav-tabs {{ classes | join(' ') }}">
    {% for tab in tabs %}
      {% set id = tab | lower | replace(' ', '-') %}
      {% if loop.index === active %}
        <li class="active"><a href="#{{id}}" data-toggle="tab">{{tab}}</a></li>
      {% else %}
        <li><a href="#{{id}}" data-toggle="tab">{{tab}}</a></li>
      {% endif %}
    {% endfor %}
  </ul>

  <div class="tab-content">
    {{ caller() }}
  </div>
{% endmacro %}


{#
  * Tab Pane (using bootstrap)
  * A helper for the tab macro that builds a tab pane with custom content of your choice
  * @param {string} id = 'home' | id of the tab pane - must match id of the associated tab nav item
  *   automatically converts to lowercase, and replaces spaces with dashes
  * @param {boolean} active = false | make tab pane active
  * @param {array} classes | adds addional classes to the tab pane
  *
  * Usage
  * {% call component.tabpane(id = 'Contact Us', active = true, classes = ['something']) %}
  *   <!-- content here -->
  * {% endcall %}
  *
  * Outputs
  * <div class="tab-pane active something" id="contact-us"> ... </div>
#}

{% macro tabpane(id, active = false, classes = []) %}
  {% if active %}
    <div class="tab-pane active {{ classes | join(' ') }}" id="{{ id | lower | replace(' ', '-') }}">{{ caller() }}</div>
  {% else %}
    <div class="tab-pane {{ classes | join(' ') }}" id="{{ id | lower | replace(' ', '-') }}">{{ caller() }}</div>
  {% endif %}
{% endmacro %}

Experimental and didn't really pan out; only worth using if you have extremely simple tabs.