<a href="#" class="rtds-tab is-tab rtds-tab--default rtds-tab--icon-label rtds-tab--icon-right">
<span class="rtds-tab__label">tab label</span>
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--home-modern" />
</svg>
</a>
<{% if href %}a href="{{ href }}"{% else %}button{% endif %} class="rtds-tab is-tab{% block classes %} rtds-tab--default {{ classes }}{% endblock %}{% if isActive %} is-active{% endif %}"
{% if roleTab %}role="tab"{% endif %}
{% if id %}id="{{ id }}"{% endif %}
{% if ariaSelected %}aria-selected="{{ ariaSelected }}"{% endif %}
{% if tabIndex %}tabindex="-1"{% endif %}
{% if ariaControls %}aria-controls="{{ ariaControls }}"{% endif %}
{% if ariaCurrent %}aria-current="{{ ariaCurrent }}"{% endif %}
>
{% if iconLeft %}
{% render '@icon--small', { id: iconLeft, size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6' }, true %}
{% endif %}
<span class="rtds-tab__label{% if iconOnly %} rtds-sr-only{% endif %}">{{ label }}</span>
{% if iconRight %}
{% render '@icon--small', { id: iconRight, size: 'rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6' }, true %}
{% endif %}
</{% if href %}a{% else %}button{% endif %}>
{
"label": "tab label",
"href": "#",
"classes": "rtds-tab--icon-label rtds-tab--icon-right",
"iconRight": "outline--home-modern"
}
/**
* TAB
*
*
*/
/* BASE */
@layer components {
.rtds-tab {
@apply rtds-flex rtds-justify-center rtds-font-bold hover:rtds-background-02 rtds-transition-all;
}
.rtds-tab--default {
@apply rtds-content-02 rtds-p-2 md:rtds-p-3 rtds-border-b-2 rtds-border-transparent rtds-text-sm md:rtds-text-base hover:rtds-background-02;
}
.rtds-tab--default.is-active,
.rtds-tab--default[aria-selected="true"] {
@apply rtds-content-primary rtds-border-current;
}
/* BORDERLESS */
.rtds-tab--borderless {
@apply rtds-p-4 lg:rtds-py-6 lg:rtds-px-12 xl:rtds-py-6 xl:rtds-px-16 rtds-background-03;
}
.rtds-tab--borderless.is-active,
.rtds-tab--borderless[aria-selected="true"] {
@apply rtds-bg-white rtds-content-primary;
}
.rtds-tab--icon-label {
@apply rtds-gap-2;
}
}
Il componente Tab è un elemento molecolare che gestisce la visualizzazione di tab singoli, utilizzabile sia come link che come pulsante. È progettato per essere accessibile e responsive, supportando diverse configurazioni di layout e stile.
Il componente utilizza una struttura semantica con:
<a> o <button> come elemento principaleLa struttura base del markup è:
<a class="rtds-tab is-tab rtds-tab--default" role="tab" aria-selected="true">
<!-- Icona sinistra opzionale -->
<span>Etichetta tab</span>
<!-- Icona destra opzionale -->
</a>Il componente è stato progettato seguendo le linee guida WCAG 2.1 e implementa diverse caratteristiche per garantire l’accessibilità:
<a> o <button>)role="tab" per identificare l’elemento come tabaria-selected per indicare lo stato di selezionearia-controls per associare il tab al suo pannelloaria-current per indicare la posizione correnteI seguenti parametri possono essere utilizzati per configurare il componente:
label: stringa - etichetta del tabhref: stringa - URL o hash se l’elemento è un link, altrimenti sarà un pulsanteroleTab: booleano - se l’elemento è incluso in una tablist (richiede role tab)ariaSelected: booleano - se l’elemento è incluso in una tablistariaControls: stringa - ID del pannello tab correlatoariaCurrent: stringa - valore per l’attributo aria-current (page, step, location, date, time, true)id: stringa - ID del tabtabIndex: booleano - se deve avere l’attributo tabindexiconLeft: booleano - se ha un’icona a sinistraiconRight: booleano - se ha un’icona a destraborderColor: stringa - colore del bordo per lo stato attivobgColor: stringa - colore di sfondobgActiveColor: stringa - colore di sfondo per lo stato attivoisActive: booleano - se ha la classe is-active (stato attivo)Il file di configurazione supporta le seguenti impostazioni:
title: stringa - titolo del componentecontext: oggetto - configurazione di defaultlabel: stringa - etichetta del tab (default: “tab label”)href: stringa - URL di default (default: “#”)borderColor: stringa - colore del bordo (default: “rtds-border-gray-04”)default: variante base del tabactive: variante con stato attivoisActive: booleano - impostato a trueborderless: variante senza bordobgColor: stringa - colore di sfondo (default: “rtds-background-03”)bgActiveColor: stringa - colore di sfondo attivo (default: “rtds-bg-white”)classes: stringa - classi aggiuntive (default: “rtds-content-02 rtds-min-w-4”)