mirror of
https://github.com/django-components/django-components.git
synced 2025-10-03 18:54:33 +00:00
43 lines
1 KiB
HTML
43 lines
1 KiB
HTML
{% load component_tags %}
|
|
<div
|
|
x-data="{ selectedTab: '{{ selected_tab }}' }"
|
|
{% html_attrs
|
|
container_attrs
|
|
id=id
|
|
%}
|
|
>
|
|
<div
|
|
{% html_attrs
|
|
tablist_attrs
|
|
role="tablist"
|
|
aria-label=name
|
|
%}>
|
|
{% for tab_datum, is_hidden in tab_data %}
|
|
<button
|
|
:aria-selected="selectedTab === '{{ tab_datum.tab_id }}'"
|
|
@click="selectedTab = '{{ tab_datum.tab_id }}'"
|
|
{% html_attrs
|
|
tab_attrs
|
|
id=tab_datum.tab_id
|
|
role="tab"
|
|
aria-controls=tab_datum.tabpanel_id
|
|
disabled=tab_datum.disabled
|
|
%}>
|
|
{{ tab_datum.header }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
{% for tab_datum, is_hidden in tab_data %}
|
|
<article
|
|
:hidden="selectedTab != '{{ tab_datum.tab_id }}'"
|
|
{% html_attrs
|
|
tabpanel_attrs
|
|
hidden=is_hidden
|
|
role="tabpanel"
|
|
id=tab_datum.tabpanel_id
|
|
aria-labelledby=tab_datum.tab_id
|
|
%}>
|
|
{{ tab_datum.content }}
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|