title	description	layout	permalink	date
c-tabs.js	Documentation de la librairie c-tab.js dédiée à la gestion d'onglets et tabulations.	libdoc_page.liquid	index.html	git Last Modified

{% sandbox 'Démo c-tabs.js' %}

Tab numéro 1 Tab numéro 2 Tab numéro 3

Onglet numéro 1

Les boutons tabulations et onglets doivent disposer de leurs attributs/classes initiales au chargement de la page. c-tabs.js assure la bascule correcte des classes au clic sur les tabulations ou appel de la méthode open.

Les paramètres des tabulations/onglets doivent être renseignés sous forme d'attributs sur chaque conteneur d'onglets:

• data-pane-default-class définit la classe d'un onglet fermé
• data-pane-active-class définit la classe de l'onglet actif
• data-tab-default-class définit la classe du bouton tab fermé
• data-tab-active-class définit la classe du bouton tab actif

Onglet numéro 2

Invidunt sed sea justo lorem diam. Justo elitr labore sit sanctus sea labore dolore, erat voluptua sed tempor accusam takimata.

Onglet numéro 3

Magna elitr nonumy sadipscing sadipscing kasd duo nonumy amet, accusam diam et est elitr. Stet ipsum diam diam sit sed..

<script src="/assets/c-tabs.js"></script> <style> .d-none { display: none; } .tab-btn { background-color: transparent; border-top: none; border-left: none; border-right: none; padding: 0.3em 1em; border-bottom: 2px solid #EEE; border-radius: 0; color: #444; cursor: pointer; } .tab-btn.active { border-bottom: 2px solid yellowgreen; color: #000; } body { font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif; padding: 2rem; margin: 0; line-height: 1.5em; } </style> {% endsandbox %}

Installation

Il est recommandé de placer les fichiers dans cet ordre avant la balise fin de body.

En local

<script src="/path/to/c-tabs.js"></script>

Sur CDN

Via https://www.jsdelivr.com/

Version la plus récente

https://cdn.jsdelivr.net/gh/ita-design-system/c-tabs.js@main/assets/c-tabs.js

Version la plus récente minifiée

https://cdn.jsdelivr.net/gh/ita-design-system/c-tabs.js@main/assets/c-tabs.min.js

Typologie avec numéro de version

https://cdn.jsdelivr.net/gh/ita-design-system/c-tabs.js@<TAG_VERSION>/assets/c-tabs.js

Typologie numéro de version + minification automatique

https://cdn.jsdelivr.net/gh/ita-design-system/c-tabs.js@<TAG_VERSION>/assets/c-tabs.min.js

Exemple v0.1.0

https://cdn.jsdelivr.net/gh/ita-design-system/c-tabs.js@0.1.0/assets/c-tabs.min.js

Usage

Les boutons tabulations et onglets doivent disposer de leurs attributs/classes initiales au chargement de la page. c-tabs.js assure la bascule correcte des classes au clic sur les tabulations ou appel de la méthode open.

• Tabulations / boutons (tab) déclenchant l'ouverture ou la fermeture des onglets:
  • c-tab="ID_ONGLET_1" attribut spécifiant que le clic ouvre l'onglet dont l'identifiant est ID_ONGLET_1
• Conteneur des onglets (panes), peut être n'importe quelle balise HTML: Les paramètres des tabulations/onglets doivent être renseignés sous forme d'attributs sur chaque conteneur d'onglets:
  • data-pane-default-class définit la classe d'un onglet fermé.
  • data-pane-active-class définit la classe de l'onglet actif.
  • data-tab-default-class définit la classe du bouton tab fermé.
  • data-tab-active-class définit la classe du bouton tab actif.
• Onglet (pane)
  • c-tab-name="ID_ONGLET_1" attribut identifiant l'onglet

<nav>
    <a  href="#" 
        c-tab="tab1"
        class="tab-btn active">
        Tab numéro 1
    </a>
    <a  href="#" 
        c-tab="tab2"
        class="tab-btn">
        Tab numéro 2
    </a>
    <a  href="#" 
        c-tab="tab3"
        class="tab-btn">
        Tab numéro 3
    </a>
</nav>
<!-- 
    CONTENEUR DES ONGLETS
    Doit contenir les attributs suivants
    data-pane-default-class définit la classe d'un onglet fermé
    data-pane-active-class définit la classe de l'onglet actif
    data-tab-default-class définit la classe du bouton tab fermé
    data-tab-active-class définit la classe du bouton tab actif
-->
<div    data-pane-default-class="d-none"
        data-pane-active-class=""
        data-tab-default-class="tab-btn"
        data-tab-active-class="tab-btn active">
    <div c-tab-name="tab1">
        Onglet numéro 1
    </div>
    <div c-tab-name="tab2"
        class="d-none">
        Onglet numéro 2
    </div>
    <div c-tab-name="tab3"
        class="d-none">
        Onglet numéro 3
    </div>
</div>

Méthodes

// Initialise ou actualise les instances de c-tabs
// A invoquer au chargement de la page ainsi qu'à chaque changement
cTabs.update();

// Ouvre l'onglet spécifié et affecte les tabulations liées à ce groupe d'onglets
cTabs.open('ID_ONGLET');