- Plusieurs groupes de tabs possibles dans une même page
- Utilise les
data attribute
et lesID
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.
1 - Praesent maximus, mi a faucibus viverra.
2 - Praesent maximus, mi a faucibus viverra. Praesent maximus, mi a faucibus viverra.
3 - Praesent maximus, mi a faucibus viverra. Faucibus viverra.
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
-
NameTypeDefaultDescription
-
makeFirstTabActiveBooleanfalseSi vous ne paramétrez pas un tabs et son heading actif par défaut dans votre template, vous pouvez mettre cette option à true pour le faire via JS. Il se peut que vous voyez un layout jump par contre.