mirror of
https://github.com/tabler/tabler.git
synced 2025-12-24 10:48:14 +04:00
68 lines
3.3 KiB
HTML
68 lines
3.3 KiB
HTML
{% assign id = include.id %}
|
|
{% assign icon-class = "me-2" %}
|
|
{% if include.hide-text %}
|
|
{% assign icon-class = "" %}
|
|
{% endif %}
|
|
{% assign reverse = include.reverse | default: false %}
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<ul class="nav nav-tabs card-header-tabs{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-bs-toggle="tabs">
|
|
<li class="nav-item">
|
|
<a href="#tabs-home-{{ id }}" class="nav-link active" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="#tabs-profile-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
|
|
</li>
|
|
|
|
{% if include.activity %}
|
|
<li class="nav-item">
|
|
<a href="#tabs-activity-{{ id }}" class="nav-link" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% if include.disabled %}
|
|
<li class="nav-item">
|
|
<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-bs-toggle="tab">{% if include.icons %}{% include "ui/icon.html" icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% if include.dropdown %}
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
|
{% include "ui/dropdown-menu.html" %}
|
|
</li>
|
|
{% endif %}
|
|
{% if include.settings %}
|
|
<li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
|
|
<a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include "ui/icon.html" icon="settings" %}</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="tab-content">
|
|
<div class="tab-pane{% if include.animation %} fade{% endif %} active show" id="tabs-home-{{ id }}">
|
|
<h4>Home tab</h4>
|
|
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
|
|
</div>
|
|
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-profile-{{ id }}">
|
|
<h4>Profile tab</h4>
|
|
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
|
|
</div>
|
|
{% if include.settings %}
|
|
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-settings-{{ id }}">
|
|
<h4>Settings tab</h4>
|
|
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if include.activity %}
|
|
<div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-activity-{{ id }}">
|
|
<h4>Activity tab</h4>
|
|
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|