A label or category used to describe content.
<div x-data x-tabs>
<nav x-tabs:list class="-mb-px flex space-x-8" aria-label="Tabs"><button x-tabs:tab class="flex items-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg" :class="$tab.isSelected ? 'cursor-default border-secondary-700 text-secondary-600' : 'border-transparent text-tertiary-500 hover:text-tertiary-700 hover:border-tertiary-300'"><span>Current tab</span></button><button x-tabs:tab class="flex items-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg" :class="$tab.isSelected ? 'cursor-default border-secondary-700 text-secondary-600' : 'border-transparent text-tertiary-500 hover:text-tertiary-700 hover:border-tertiary-300'"><span class="mr-2">
<div class="fill-current w-5 h-5 md:w-6 md:h-6" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="9" y1="10" x2="9.01" y2="10"></line>
<line x1="15" y1="10" x2="15.01" y2="10"></line>
<path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
</svg></div>
</span><span>Tab with icon</span></button><button x-tabs:tab class="flex items-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg" :class="$tab.isSelected ? 'cursor-default border-secondary-700 text-secondary-600' : 'border-transparent text-tertiary-500 hover:text-tertiary-700 hover:border-tertiary-300'"><span>Tab with count</span><span class="ml-1">(5)</span></button></nav>
<div x-tabs:panels>
<section x-tabs:panel x-transition:enter.opacity.duration.500ms class="azalea-body-text py-4 font-body subpixel-antialiased leading-6">
<div class="azalea-text-md"></div>
</section>
<section x-tabs:panel x-transition:enter.opacity.duration.500ms class="azalea-body-text py-4 font-body subpixel-antialiased leading-6">
<div class="azalea-text-md"></div>
</section>
<section x-tabs:panel x-transition:enter.opacity.duration.500ms class="azalea-body-text py-4 font-body subpixel-antialiased leading-6">
<div class="azalea-text-md"></div>
</section>
</div>
</div>
{% apply spaceless %}
{#
Prop: tabs
[
{
name: The tab text,
id: The tab id,
icon: The icon name,
count: A "result" number associated with the tab,
current: (boolean) is current/open tab,
content: {
value: The tab content,
long: (boolean) constrain the container height,
}
}
]
#}
<div x-data x-tabs>
<nav x-tabs:list class="-mb-px flex space-x-8" aria-label="Tabs">
{% for tab in tabs %}
<button
x-tabs:tab
class="flex items-center whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg"
:class="$tab.isSelected ? 'cursor-default border-secondary-700 text-secondary-600' : 'border-transparent text-tertiary-500 hover:text-tertiary-700 hover:border-tertiary-300'"
>
{% if tab.icon %}
<span class="mr-2">{% include "@components/icon/icon.twig" with { icon: tab.icon } %}</span>
{% endif %}
<span>{{ tab.name }}</span>
{% if tab.count %}
<span class="ml-1">({{ tab.count }})</span>
{% endif %}
</button>
{% endfor %}
</nav>
<div x-tabs:panels>
{% for tab in tabs %}
<section
x-tabs:panel
x-transition:enter.opacity.duration.500ms
class="azalea-body-text py-4 font-body subpixel-antialiased leading-6"
>
<div class="azalea-text-md{% if tab.content.long %} max-h-72 overflow-y-auto{% endif %}">
{{ tab.content.value|raw }}
</div>
</section>
{% endfor %}
</div>
</div>
{% endapply %}