Skip to main content

Tabs

  • Plusieurs groupes de tabs possibles dans une même page
  • Utilise les data attribute et les ID pour lier le tab avec son contenu permettant que le markup html soit pratiquement indépendant du volet fonctionnel
  • Style et fonctionnalités facilement modifiables pour votre projet (par exemple, pour créer des tabs verticaux ou autre)

Accessibilité

  • Le focus est trapped dans les onglets permettant une navigation avec les flèches gauche / droite du clavier

Demo

Naviguez entre les tabs suivantes afin de tester.

Installation

Importez dans votre projet

import { Tabs } from "@overdog/fn"

Créez et initialisez une instance

new Tabs("#tabs", {
  // options goes here
}).init()

Ajoutez les variants Tailwind dans la section plugins de votre fichier de config

Note : si vous utilisez plusieurs éléments de Overdog FN qui nécessitent les mêmes variants, vous les ajoutez seulement une fois.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")
      })
   ]
}

Note : Assurez-vous que vos ID de tabs et de data-fn-target soient uniques si vous avez plusieurs groupes de tabs dans une même page.

Twig template Code


{# You probably want to change this array for a Craft CMS query #}
{% set contentArray = [
   { title: "First tab", content: "1 - Praesent maximus, mi a faucibus viverra." },
   { title: "Second tab", content: "2 - Praesent maximus, mi a faucibus viverra. Praesent maximus, mi a faucibus viverra." },
   { title: "Third tab", content: "3 - Praesent maximus, mi a faucibus viverra. Faucibus viverra." }
] 
%}

<div id="tabs">
   <div 
      class="flex border-b border-gray-400" 
      data-fn-tabs 
      role="tablist" 
   >
      {% for item in contentArray %}
         <button 
            class="block py-4 px-6 bg-white is-open:bg-slate-800 is-open:text-white"
            {% if loop.index is same as 1 %}data-fn-is-open{% endif %}{# open the first heading on load #}
            data-fn-tabs-heading
            data-fn-target="tab-{{ loop.index }}"
            role="tab"
            aria-selected="true" 
            aria-controls="tab-{{ loop.index }}"
         >
            {{ item.title }}
         </button>
      {% endfor %}
   </div>
   {% for item in contentArray %}
      <div 
         class="hidden overflow-hidden py-4 is-open:block"
         {% if loop.index is same as 1 %}data-fn-is-open{% endif %}{# open the first content on load #}
         data-fn-tabs-content
         id="tab-{{ loop.index }}" 
         role="tabpanel" 
         aria-labelledby="tab-{{ loop.index }}"
      >
       {{ item.content }}
      </div>
   {% endfor %}
</div>

Options