Fijn

Tabs component: Default 

<ul class="nav nav-tabs m-tabs position-relative">

    <li class="nav-item active" role="presentation">
        <a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Item 1</a>
    </li>

    <li class="nav-item" role="presentation">
        <a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Item 2</a>
    </li>

    <li class="nav-item" role="presentation">
        <a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Item 3</a>
    </li>

    <li class="nav-item" role="presentation">
        <a href="#nav-" class="nav-link" id="nav--tab" data-toggle="tab" href="#nav-" role="tab" aria-controls="nav-" aria-selected="true">Item 4</a>
    </li>

    <div class="nav-line"></div>
</ul>
 
<ul class="nav nav-tabs m-tabs position-relative{% if (element) and (fieldset == false) %} pl-3 pr-3 pl-md-4 pr-md-4{% endif %}">
    {% for item in items %}
        <li class="nav-item{% if item.class %} {{item.class}}{% endif %}" role="presentation">
            <a href="#nav-{{item.tab_title | safe}}" class="nav-link" id="nav-{{item.tab_title | safe}}-tab" data-toggle="tab" href="#nav-{{item.tab_title | safe}}" role="tab" aria-controls="nav-{{item.tab_title | safe}}" aria-selected="true">{{item.title | safe}}{% if item.count %}<span class="ml-2">{% render '@badge--count' %}</span>{% endif %}</a>
        </li>
    {% endfor %}
    <div class="nav-line"></div>
</ul>
 
{
  "tab_title": "",
  "count": false,
  "element": false,
  "fieldset": false,
  "items": [
    {
      "title": "Item 1",
      "class": "active"
    },
    {
      "title": "Item 2"
    },
    {
      "title": "Item 3"
    },
    {
      "title": "Item 4"
    }
  ]
}

No notes defined.