Tab

Attraverso l'utilizzo dei tab è possibile avere un layout di navigazione all'interno del quale organizzare contenuti, set di dati e altre interazioni.
Qui potrai trovare la User Interface, lo snippet e le modalità di utilizzo per i tab nell’Ecosistema digitale Turismo Cultura.

Tab orizzontale

Tab 1

Eget elementum penatibus repudiandae iste earum minus doloremque rutrum adipiscing et scelerisque. Erat, asperiores suspendisse facilisis? Auctor imperdiet, placeat? Cum diamlorem, dolorem ante aspernatur? Duis accusamus vulputate nihil distinctio reiciendis. Magna maiores! Nunc facilis varius rem. Dolore litora enim architecto voluptates vel, aute labore? Gravida assumenda expedita, diam wisi, repudiandae. Voluptate sapien facere nostrud unde bibendum? Varius dolor quod alias! Unde voluptatum lorem, ultrices praesentium est dignissimos ridiculus, alias elementum? Erat asperiores adipisci eligendi, delectus voluptatem nostrud pede iste mollit, labore! Nulla habitant augue. Nascetur penatibus nemo quia. Do adipisicing. Maiores? Pretium porro eveniet. Congue accumsan minima assumenda, magnis.

Tab 2

Quis. Magni fermentum hac mauris adipiscing eget nostrum hic, nihil. Suspendisse tellus sem! Veniam dolorem occaecati sociosqu mauris voluptatibus nonummy corporis libero excepturi odit explicabo lacinia, lacus litora, vehicula pharetra? Do eleifend, faucibus? Anim adipisci! Laborum, vero hac viverra accusantium quisquam? Minim? Cubilia commodi? Congue habitant tincidunt parturient neque natoque. Proin augue nostrum hymenaeos, maecenas, lectus. Felis! Egestas lobortis aspernatur, viverra rhoncus felis augue rhoncus ratione sem sollicitudin eius quod laoreet elit, necessitatibus senectus voluptatibus delectus ipsam amet malesuada ad cumque! Itaque quisque vero maecenas fugiat deserunt sodales, enim diamlorem. Magnam amet ornare quasi! Aliquet tincidunt! Ratione rem? Occaecati animi.

Tab 3

Dis accusamus nisi cum repudiandae adipisicing imperdiet, ad fames penatibus natoque nisl. Nostra minim posuere nesciunt neque dui per conubia vero, aliquip veritatis dolore? Nisl maiores nisi autem class class sagittis quasi natus occaecat voluptas optio, rutrum vulputate excepturi ea, laboris rem saepe excepturi molestie! Repellendus quibusdam iaculis, eligendi. Molestiae. Nunc numquam pulvinar convallis orci, fames? Varius magnam quae arcu! Curabitur imperdiet proin phasellus magnis fermentum expedita mollit excepteur mattis, qui sint ducimus laoreet phasellus montes! Leo leo feugiat quam, quaerat incidunt voluptate dapibus. Accumsan necessitatibus quidem dolores lacus cupiditate. Magna netus. Accusamus quo aut irure? Class architecto corrupti hic.

                           
<div class="dms-tab-wrapper">
    <button class="btn dms-btn dms-btn--secondary dms-btn--full-width navigation-tab"
        type="button"></button>
    <ul class="nav dms-tab" role="tablist">
        <li class="dms--nav-item">
            <a class="dms--nav-link active" id="tab-1" data-toggle="tab" href="#tab1" role="tab" 
            aria-controls="esempio-1" aria-selected="true">Tab 1</a>
        </li>
        <li class="dms--nav-item">
            <a class="dms--nav-link" id="tab-2" data-toggle="tab" href="#tab2" role="tab"
                aria-controls="esempio-1" aria-selected="false">Tab 2</a>
        </li>
        <li class="dms--nav-item">
            <a class="dms--nav-link" id="tab-3" data-toggle="tab" href="#tab3" role="tab"
                aria-controls="esempio-1" aria-selected="false">Tab 3</a>
        </li>
        <li class="dms--nav-item">
            <a class="dms--nav-link disabled" id="tab-4" tabindex="-1" data-toggle="tab" href="#tab4"
                role="tab" aria-controls="esempio-4" aria-selected="false">Tab 4 disabilitato</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <section class="tab-pane fade show active" id="tab1" role="tabpanel"
            aria-labelledby="tab-1">
            <p>Eget elementum penatibus repudiandae iste earum minus doloremque rutrum
                adipiscing et
                scelerisque. Erat, asperiores suspendisse facilisis? Auctor imperdiet,
                placeat? Cum
                diamlorem, dolorem ante aspernatur? Duis accusamus vulputate nihil
                distinctio
                reiciendis. Magna maiores! Nunc facilis varius rem. Dolore litora enim
                architecto
                voluptates vel, aute labore? Gravida assumenda expedita, diam wisi,
                repudiandae.
                Voluptate sapien facere nostrud unde bibendum? Varius dolor quod alias! Unde
                voluptatum lorem, ultrices praesentium est dignissimos ridiculus, alias
                elementum?
                Erat asperiores adipisci eligendi, delectus voluptatem nostrud pede iste
                mollit,
                labore! Nulla habitant augue. Nascetur penatibus nemo quia. Do adipisicing.
                Maiores?
                Pretium porro eveniet. Congue accumsan minima assumenda, magnis.</p>
        </section>
        <section class="tab-pane fade show" id="tab2" role="tabpanel"
            aria-labelledby="tab-2">
            <p>Quis. Magni fermentum hac mauris adipiscing eget nostrum hic, nihil.
                Suspendisse
                tellus sem! Veniam dolorem occaecati sociosqu mauris voluptatibus nonummy
                corporis
                libero excepturi odit explicabo lacinia, lacus litora, vehicula pharetra? Do
                eleifend, faucibus? Anim adipisci! Laborum, vero hac viverra accusantium
                quisquam?
                Minim? Cubilia commodi? Congue habitant tincidunt parturient neque natoque.
                Proin
                augue nostrum hymenaeos, maecenas, lectus. Felis! Egestas lobortis
                aspernatur,
                viverra rhoncus felis augue rhoncus ratione sem sollicitudin eius quod
                laoreet elit,
                necessitatibus senectus voluptatibus delectus ipsam amet malesuada ad
                cumque! Itaque
                quisque vero maecenas fugiat deserunt sodales, enim diamlorem. Magnam amet
                ornare
                quasi! Aliquet tincidunt! Ratione rem? Occaecati animi.</p>
        </section>
        <section class="tab-pane fade show" id="tab3" role="tabpanel"
            aria-labelledby="tab-3">
            <p>Dis accusamus nisi cum repudiandae adipisicing imperdiet, ad fames penatibus
                natoque
                nisl. Nostra minim posuere nesciunt neque dui per conubia vero, aliquip
                veritatis
                dolore? Nisl maiores nisi autem class class sagittis quasi natus occaecat
                voluptas
                optio, rutrum vulputate excepturi ea, laboris rem saepe excepturi molestie!
                Repellendus quibusdam iaculis, eligendi. Molestiae. Nunc numquam pulvinar
                convallis
                orci, fames? Varius magnam quae arcu! Curabitur imperdiet proin phasellus
                magnis
                fermentum expedita mollit excepteur mattis, qui sint ducimus laoreet
                phasellus
                montes! Leo leo feugiat quam, quaerat incidunt voluptate dapibus. Accumsan
                necessitatibus quidem dolores lacus cupiditate. Magna netus. Accusamus quo
                aut
                irure? Class architecto corrupti hic.</p>
        </section>
    </div>
    <div class="dms-tab-wrapper">
    <button class="btn dms-btn dms-btn--secondary dms-btn--full-width navigation-tab"
        type="button">Seleziona una voce</button>
    <ul class="nav dms-tab" role="tablist">
        <li class="dms--nav-item">
            <a class="dms--nav-link active" id="tab-1" data-toggle="tab" href="#tab1"
                role="tab" aria-controls="esempio-1" aria-selected="true">Tab 1</a>
        </li>
        <li class="dms--nav-item">
            <a class="dms--nav-link" id="tab-2" data-toggle="tab" href="#tab2"
                role="tab" aria-controls="esempio-2" aria-selected="false">Tab 2</a>
        </li>
        <li class="dms--nav-item">
            <a class="dms--nav-link" id="tab-3" data-toggle="tab" href="#tab3"
                role="tab" aria-controls="esempio-3" aria-selected="false">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <section class="tab-pane fade show active" id="tab1" role="tabpanel"
            aria-labelledby="tab-1">
            <h2 class="dms-tab-title">Tab 1</h2>
            <p>Eget elementum penatibus repudiandae iste earum minus doloremque rutrum
                adipiscing et
                scelerisque. Erat, asperiores suspendisse facilisis? Auctor imperdiet,
                placeat? Cum
                diamlorem, dolorem ante aspernatur? Duis accusamus vulputate nihil
                distinctio
                reiciendis. Magna maiores! Nunc facilis varius rem. Dolore litora enim
                architecto
                voluptates vel, aute labore? Gravida assumenda expedita, diam wisi,
                repudiandae.
                Voluptate sapien facere nostrud unde bibendum? Varius dolor quod alias!
                Unde
                voluptatum lorem, ultrices praesentium est dignissimos ridiculus, alias
                elementum?
                Erat asperiores adipisci eligendi, delectus voluptatem nostrud pede iste
                mollit,
                labore! Nulla habitant augue. Nascetur penatibus nemo quia. Do
                adipisicing.
                Maiores?
                Pretium porro eveniet. Congue accumsan minima assumenda, magnis.</p>
        </section>
        <section class="tab-pane fade show" id="tab2" role="tabpanel"
            aria-labelledby="tab-2">
            <h2 class="dms-tab-title">Tab 2</h2>
            <p>Quis. Magni fermentum hac mauris adipiscing eget nostrum hic, nihil.
                Suspendisse
                tellus sem! Veniam dolorem occaecati sociosqu mauris voluptatibus
                nonummy
                corporis
                libero excepturi odit explicabo lacinia, lacus litora, vehicula
                pharetra? Do
                eleifend, faucibus? Anim adipisci! Laborum, vero hac viverra accusantium
                quisquam?
                Minim? Cubilia commodi? Congue habitant tincidunt parturient neque
                natoque.
                Proin
                augue nostrum hymenaeos, maecenas, lectus. Felis! Egestas lobortis
                aspernatur,
                viverra rhoncus felis augue rhoncus ratione sem sollicitudin eius quod
                laoreet elit,
                necessitatibus senectus voluptatibus delectus ipsam amet malesuada ad
                cumque! Itaque
                quisque vero maecenas fugiat deserunt sodales, enim diamlorem. Magnam
                amet
                ornare
                quasi! Aliquet tincidunt! Ratione rem? Occaecati animi.</p>
        </section>
        <section class="tab-pane fade show" id="tab3" role="tabpanel"
            aria-labelledby="tab-3">
            <h2 class="dms-tab-title">Tab 3</h2>
            <p>Dis accusamus nisi cum repudiandae adipisicing imperdiet, ad fames
                penatibus
                natoque
                nisl. Nostra minim posuere nesciunt neque dui per conubia vero, aliquip
                veritatis
                dolore? Nisl maiores nisi autem class class sagittis quasi natus
                occaecat
                voluptas
                optio, rutrum vulputate excepturi ea, laboris rem saepe excepturi
                molestie!
                Repellendus quibusdam iaculis, eligendi. Molestiae. Nunc numquam
                pulvinar
                convallis
                orci, fames? Varius magnam quae arcu! Curabitur imperdiet proin
                phasellus
                magnis
                fermentum expedita mollit excepteur mattis, qui sint ducimus laoreet
                phasellus
                montes! Leo leo feugiat quam, quaerat incidunt voluptate dapibus.
                Accumsan
                necessitatibus quidem dolores lacus cupiditate. Magna netus. Accusamus
                quo
                aut
                irure? Class architecto corrupti hic.</p>
        </section>
    </div>
</div>

                           
$(".navigation-tab").click(function (e) {
    e.preventDefault();
    $(this).toggleClass("expanded");
    $(".dms-tab").toggleClass("tab-show");
});

$(".dms--nav-link").click(function (e) {
    e.preventDefault();
    $(".dms-tab").removeClass("tab-show");
});

Tab verticale

Tab 1

Tab 2

Tab 3

                           
<div class="dms-tab-wrapper is-vertical">
<button
    class="btn dms-btn dms-btn--secondary dms-btn--full-width navigation-tab-vertical"
    type="button">Seleziona una voce</button>
<div class="row">
    <div class="col-md-2 pr-0">
        <div class="nav flex-column nav-pills nav-menu" id="v-pills-tab"
            role="tablist" aria-orientation="vertical">
            <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill"
                href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1"
                aria-selected="true">Tab 1</a>
            <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill"
                href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2"
                aria-selected="false">Tab 2</a>
            <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill"
                href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3"
                aria-selected="false">Tab 3</a>
        </div>
    </div>
    <div class="col-md-10 pl-0">
        <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel"
                aria-labelledby="v-pills-tab1-tab">
                <h2 class="dms-tab-title">Tab 1</h2>
                Eget elementum penatibus
                repudiandae iste earum minus doloremque rutrum adipiscing et
                scelerisque. Erat, asperiores suspendisse facilisis? Auctor
                imperdiet, placeat? Cum diamlorem, dolorem ante aspernatur? Duis
                accusamus vulputate nihil distinctio reiciendis. Magna maiores! Nunc
                facilis varius rem. Dolore litora enim architecto voluptates vel,
                aute labore? Gravida assumenda expedita, diam wisi, repudiandae.
                Voluptate sapien facere nostrud unde bibendum? Varius dolor quod
                alias! Unde voluptatum lorem, ultrices praesentium est dignissimos
                ridiculus, alias elementum? Erat asperiores adipisci eligendi,
                delectus voluptatem nostrud pede iste mollit, labore! Nulla habitant
                augue. Nascetur penatibus nemo quia. Do adipisicing. Maiores?
                Pretium porro eveniet. Congue accumsan minima assumenda, magnis.
            </div>
            <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel"
                aria-labelledby="v-pills-tab2-tab">
                <h2 class="dms-tab-title">Tab 2</h2>
                Quis. Magni fermentum hac mauris
                adipiscing eget nostrum hic, nihil. Suspendisse tellus sem! Veniam
                dolorem occaecati sociosqu mauris voluptatibus nonummy corporis
                libero excepturi odit explicabo lacinia, lacus litora, vehicula
                pharetra? Do eleifend, faucibus? Anim adipisci! Laborum, vero hac
                viverra accusantium quisquam? Minim? Cubilia commodi? Congue
                habitant tincidunt parturient neque natoque. Proin augue nostrum
                hymenaeos, maecenas, lectus. Felis! Egestas lobortis aspernatur,
                viverra rhoncus felis augue rhoncus ratione sem sollicitudin eius
                quod laoreet elit, necessitatibus senectus voluptatibus delectus
                ipsam amet malesuada ad cumque! Itaque quisque vero maecenas fugiat
                deserunt sodales, enim diamlorem. Magnam amet ornare quasi! Aliquet
                tincidunt! Ratione rem? Occaecati animi.
            </div>
            <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel"
                aria-labelledby="v-pills-tab3-tab">
                <h2 class="dms-tab-title">Tab 3</h2>
                Dis accusamus nisi cum
                repudiandae adipisicing imperdiet, ad fames penatibus natoque nisl.
                Nostra minim posuere nesciunt neque dui per conubia vero, aliquip
                veritatis dolore? Nisl maiores nisi autem class class sagittis quasi
                natus occaecat voluptas optio, rutrum vulputate excepturi ea,
                laboris rem saepe excepturi molestie! Repellendus quibusdam iaculis,
                eligendi. Molestiae. Nunc numquam pulvinar convallis orci, fames?
                Varius magnam quae arcu! Curabitur imperdiet proin phasellus magnis
                fermentum expedita mollit excepteur mattis, qui sint ducimus laoreet
                phasellus montes! Leo leo feugiat quam, quaerat incidunt voluptate
                dapibus. Accumsan necessitatibus quidem dolores lacus cupiditate.
                Magna netus. Accusamus quo aut irure? Class architecto corrupti hic.
            </div>

        </div>
    </div>
</div>
</div>

                           
$(".navigation-tab-vertical").click(function (e) {
    e.preventDefault();
    $(this).toggleClass("expanded");
    $(".nav-menu").toggleClass("tab-show");
});
    
$(".nav-link").click(function (e) {
    e.preventDefault();
    $(".nav-menu").removeClass("tab-show");
});

Utilizzo

E' obbligatorio:

inizializzare il componente tramite l'attributo data-toggle="tab" (vedi snippet oppure tramite javascript)
inserire il componente all'interno di <div class="dms-tab-wrapper">
attribuire ad ogni link nel menù di navigazione gli attributi: id="tab-1" data-toggle="tab" href="#tab1" role="tab" aria-controls="esempio-nome-tab"
settare aria-selected a false o a true. E' consigliato impostare true al primo della lista e false a tutti gli altri.
inserire tutti i contenuti all'interno di <div class="tab-content" id="myTabContent", dove "myTabContent" è modificabile e nel caso fossero presenti più tab nella stessa pagina è opportuno ricordare che gli ID devono necessariamente essere univoci
aggiungere all'interno di <div class="tab-content" id="myTabContent" il seguente elemento: <section class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab-1">.
collegare tab e contenuti associando il tag dei primi all'attributo id dei secondi, al fine di rendere navigabili le interfacce

ai fini dell'accessibilità, come descritto nelle pratiche di implementazione WAI ARIA, utilizzare di attributi role="tablist", role="tab", role="tabpanel", e ulteriori attributi aria- per trasmettere la loro struttura, funzionalità e stato attuale agli utenti delle tecnologie assistive (come i lettori di schermo)

Cose da sapere:

si basa sull'utilizzo del layout di navigazione, con l'aggiunta della classe .nav-tabs

il menù di navigazione è responsive e in modalità mobile viene visualizzato attraverso una select custom tramite un button. Questa funzione è stata implementata ad hoc all'interno del file dms-script.js

si divide in due parti: menù di navigazione e contenuti

è consigliato inserire un numero limitato di voci, o comunque di non eccedere oltre la lunghezza del div contentore in quanto può comportare problemi di formattazione

aggiungendo la classe .auto al contenitore nav-tabs i tab occupano automaticamente l'intera larghezza disponibile

lo stato dei tab può essere attivo, non attivo e disabilitato. Utilizzare la classe active sul link del tab attivo per default. Utilizzare la classe disabled sul link dei tab da disabilitare, aggiungendo la proprietà tabindex="-1" per eliminarlo dalla sequenza di navigazione via tab.

se vuoi approfondire il componente visita la pagina Navs di Bootstrap