mirror of
https://github.com/tabler/tabler.git
synced 2025-12-24 02:38:15 +04:00
40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
{% assign tabs-count = include.count | default: 3 %}
|
|
{% assign id = include.id | default: 'top' %}
|
|
{% assign tabs = (1..tabs-count) %}
|
|
|
|
{% capture tabs-html %}
|
|
<!-- Cards navigation -->
|
|
<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
|
|
{% for tab in tabs %}
|
|
<li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
{%- endcapture %}
|
|
|
|
{% capture tabs-content-html %}
|
|
<div class="tab-content">
|
|
{% for tab in tabs %}
|
|
<!-- Content of card #{{ tab }} -->
|
|
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
|
|
<div class="card-body">
|
|
<div class="card-title">Content of tab #{{ tab }}</div>
|
|
<p class="text-secondary">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{%- endcapture %}
|
|
|
|
<!-- Cards with tabs component -->
|
|
<div class="card-tabs{% if include.borderless %} border-0{% endif %}">
|
|
{% if include.bottom %}
|
|
{{ tabs-content-html }}
|
|
{{ tabs-html }}
|
|
{% else %}
|
|
{{ tabs-html }}
|
|
{{ tabs-content-html }}
|
|
{% endif %}
|
|
</div>
|