Tabs — Component Storybook

LIVE PREVIEW 1

tabs(id=gallery-tabs, tabs=[{'label': 'Tab 1', 'content': 'Content for tab 1.'}, {'label': 'Tab 2', 'content': 'Content for tab 2.'}, {'label': 'Tab 3', 'content': 'Content for tab 3.'}], active=0)

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 2

Name	Type	Default
`id`	`str`	—
`tabs`	`list`	—

PROPS — OPTIONAL 3

Name	Type	Default
`active`	`int`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—

ACCESSIBILITY 1

Requirement	Element	Attribute	Value
Tab list must have role=tablist	`div`	`role`	tablist

CSS VARIABLES 12

--border --color-border-subtle --color-surface --color-text-muted --foreground --muted --muted-foreground --primary --radius --space-3 --text-sm --text-xs

TEMPLATE SOURCE

tabs.html

<div class="{{ css_prefix }}tabs {% if attrs.class %}{{ attrs.class }}{% endif %}"
     data-theme-tabs="{{ id }}"
     data-active-class="{{ css_prefix }}tab-active"
     data-hidden-class="{{ css_prefix }}tab-panel-hidden"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    <div class="{{ css_prefix }}tab-list" role="tablist">
        {% for tab in tabs %}
        <button class="{{ css_prefix }}tab{% if forloop.counter0 == active %} {{ css_prefix }}tab-active{% endif %}"
                role="tab"
                id="{{ id }}-tab-{{ forloop.counter0 }}"
                aria-selected="{% if forloop.counter0 == active %}true{% else %}false{% endif %}"
                aria-controls="{{ id }}-panel-{{ forloop.counter0 }}"
                {% if forloop.counter0 != active %}tabindex="-1"{% endif %}>
            {{ tab.label }}
        </button>
        {% endfor %}
    </div>
    {% for tab in tabs %}
    <div class="{{ css_prefix }}tab-panel{% if forloop.counter0 != active %} {{ css_prefix }}tab-panel-hidden{% endif %}"
         role="tabpanel"
         id="{{ id }}-panel-{{ forloop.counter0 }}"
         aria-labelledby="{{ id }}-tab-{{ forloop.counter0 }}"
         {% if forloop.counter0 != active %}hidden{% endif %}>
        {{ tab.content|safe }}
    </div>
    {% endfor %}
</div>