Tabs

Basic

{% component "Tabs" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Contact" %}
                Contact content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content
Contact content

Pills Variant

{% component "Tabs" variant="pills" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Underline Variant

{% component "Tabs" variant="underline" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Tabs With Fill

{% component "Tabs" fill=True %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Longer title" %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Link" %}
                Contact content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Tabs With Justified

{% component "Tabs" justified=True %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Tabs With Disabled Tab

{% component "Tabs" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Disabled" disabled=True %}
                Disabled content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content
Disabled content

Tabs With Active Tab

{% component "Tabs" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" active=True %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Contact" %}
                Contact content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content
Contact content