28172 sujets

CSS et mise en forme, CSS3

Knacss et empilement tabs

Bonjour à tous,

Pour un site interne j'utilise les tabs fourni par Knacss. Dans un des onglets j'ai besoin d'utiliser de nouveau des onglets.

Le code (sans données) :

<div class="portail tabs js-tabs portail">
  <ul class="menu tabs-menu text-center">
    <li><a href="#on-stats" class="tabs-menu-link is-active"><i class="fas fa-chart-line"></i>Statistiques</a></li>
    <li><a href="#on-commandes" class="tabs-menu-link"><i class="fas fa-box"></i>Commandes</a></li>
    <li><a href="#on-livraisons" class="tabs-menu-link"><i class="fas fa-shipping-fast"></i>Livraisons</a></li>
  </ul>
  <div class="content">
    <div id="on-stats" class="tabs-content-item text-2 text-center">
      contenu tabs stats

      <div class="tabs js-tabs">
        <ul class="menu tabs-menu text-center">
          <li><a href="#ca-familles" class="tabs-menu-link is-active"><i class="fas fa-chart-line"></i>Par familles</a></li>
          <li><a href="#ca-pjt" class="tabs-menu-link"><i class="fas fa-box"></i>Codes affaires</a></li>
        </ul>

        <div class="tabs-content">
          <div id="on-familles" class="tabs-content-item">
            contenu de tabs familles
          </div>
          <div id="on-pjt" class="tabs-content-item">
            contenu de tabs pjt
          </div>
        </div>
      </div>
                
    </div>
    <div id="on-commandes" class="tabs-content-item text-2 text-center">
      contenu tabs commandes
    </div>
    
    <div id="on-livraisons" class="tabs-content-item text-2 text-center">
      contenu tabs livraisons
    </div>
  </div>


Le problème est qu'avec ce code le contenu de l'onglet on-stats, qui est celui visible par défaut, ne s'affiche pas. Je force l'affichage en cliquant sur l'onglet on-commandes puis je reviens à on-stats. Les li ca-familles et ca-pjt s'affiche, mais pas le contenu de ca-familles qui est pourtant celui par défaut. Je force en cliquant sur ca-pjt... Tout part en vrac Smiley decu Je reviens au cas du début avec juste les tabs on-stats, on-commandes et on-livraisons d'afficher et plus rien d'autres.

Est-ce que je m'y prends mal ou alors est-ce que tout simplement knacss ne gère pas la possibilité d'afficher des onglets dans un onglets ?

Merci d'avance.
Administrateur
Bonjour,

les onglets sont ceux de Pepin et comme par défaut chaque onglet cible les mêmes classes et éléments, ce n'est pas prévu pour fonctionner tel quel. L'avantage est qu'on est pas forcé de respecter une structure HTML bien rigide (genre les panneaux qui devraient forcément être l'élément suivant l'onglet ou dans un conteneur, etc). Au temps de Flexbox,/Grid et du RWD ce serait très problématique.

La bonne nouvelle c'est que ce script est configurable et je pense que ce que tu veux faire – imbriquer les tabs – est possible mais j'ai jamais testé.
Dans la doc de KNACSS, tu trouveras le lien vers la doc de Pepin/tabs avec les paramètres possibles.

Ce que je te propose de tester, c'est progressivement :

- crée un système d'onglet simple comme dans la doc avec ces classes-là. Vérifie que ça fonctionne.
- rajoute sur le parent .js-tabs les 4 attributs data-* correspondants aux 4 premiers paramètres (active on s'en fiche je crois) avec chaque paramètre par défaut
<div class="portail tabs js-tabs portail" data-selector-links=".tabs-menu-link" et-3-de-plus>

Attention camelCase / valeur .la-classe devient data-camel-case=".la-classe".
Vérifie que ça fonctionne.
- remplace les valeurs de chaque data-* et la/les classes dans le code HTML. 1 par 1 et… Vérifie que ça fonctionne.
- rajoute à la suite (pas dedans mais après) une copie de tes onglets ?1 dont tu changes toutes les classes se trouvant dans les data-* (pas .js-tabs sur le parent mais le reste oui). Vérifie que les 2 fonctionnent.
- imbrique le 2e dans le 1er. Si ça fonctionne encore Smiley party

Si tu veux un exemple avec Bootstrap, je te laisse apprécier les paires d'id, href, aria-trucby, aria-controls x(5+25) dans tous les sens Smiley prodigy
Modifié par Felipe (11 Apr 2019 - 17:39)
Sujet clos
Aller à