tabs.html 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. {% assign id = 0 | random_id %}
  2. {% if include.id %}
  3. {% assign id = include.id %}
  4. {% endif %}
  5. {% assign icon-class = "me-2" %}
  6. {% if include.hide-text %}
  7. {% assign icon-class = "" %}
  8. {% endif %}
  9. {% assign reverse = include.reverse | default: false %}
  10. <div class="card">
  11. <div class="card-header">
  12. <ul class="nav nav-tabs card-header-tabs{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-bs-toggle="tabs">
  13. <li class="nav-item">
  14. <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>
  15. </li>
  16. <li class="nav-item">
  17. <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>
  18. </li>
  19. {% if include.activity %}
  20. <li class="nav-item">
  21. <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>
  22. </li>
  23. {% endif %}
  24. {% if include.disabled %}
  25. <li class="nav-item">
  26. <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>
  27. </li>
  28. {% endif %}
  29. {% if include.dropdown %}
  30. <li class="nav-item dropdown">
  31. <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
  32. {% include "ui/dropdown-menu.html" %}
  33. </li>
  34. {% endif %}
  35. {% if include.settings %}
  36. <li class="nav-item {% if reverse %}me-auto{% else %}ms-auto{% endif %}">
  37. <a href="#tabs-settings-{{ id }}" class="nav-link" title="Settings" data-bs-toggle="tab">{% include "ui/icon.html" icon="settings" %}</a>
  38. </li>
  39. {% endif %}
  40. </ul>
  41. </div>
  42. <div class="card-body">
  43. <div class="tab-content">
  44. <div class="tab-pane{% if include.animation %} fade{% endif %} active show" id="tabs-home-{{ id }}">
  45. <h4>Home tab</h4>
  46. <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
  47. </div>
  48. <div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-profile-{{ id }}">
  49. <h4>Profile tab</h4>
  50. <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
  51. </div>
  52. {% if include.settings %}
  53. <div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-settings-{{ id }}">
  54. <h4>Settings tab</h4>
  55. <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
  56. </div>
  57. {% endif %}
  58. {% if include.activity %}
  59. <div class="tab-pane{% if include.animation %} fade{% endif %}" id="tabs-activity-{{ id }}">
  60. <h4>Activity tab</h4>
  61. <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
  62. </div>
  63. {% endif %}
  64. </div>
  65. </div>
  66. </div>