Skip to content

Tab

Definition

A tab component is used to organize content into multiple sections that can be easily navigated by switching between tabs. Tabs help in managing and displaying related content without overwhelming the user.

Each tab typically has a title, and clicking on a tab displays the corresponding content section while hiding others.

  • Organizes content into multiple sections.
  • Allows users to switch between sections by clicking tabs.
  • Improves content management and user experience.

Example

{% extends 'django_spire/tab/tab.html' %}

{% block tab_triggers %}
    {% include 'django_spire/tab/element/tab_trigger_element.html' with trigger_text="Tab 1" %}
    {% include 'django_spire/tab/element/tab_trigger_element.html' with trigger_text="Tab 2" %}
    {% include 'django_spire/tab/element/tab_trigger_element.html' with trigger_text="Tab 3" %}
{% endblock %}

{% block tab_function_area %}{% endblock %}

{% block tab_sections %}
    {% include 'component/tab/tab_one.html' %}
    {% include 'component/tab/tab_two.html' %}
    {% include 'component/tab/tab_three.html' %}
{% endblock %}