← Composants
Stimulus Twig Component beginner

Tabs Navigation

Système d'onglets accessible et réutilisable, zéro dépendance JS externe.

Démo
Le composant PHP annoté avec #[AsTwigComponent].
Le template Twig connecté à Stimulus via stimulus_controller().
Le controller Stimulus qui gère le switch entre panneaux.
Explication

Pourquoi ce composant ?

Les onglets sont partout, mais la plupart des implémentations embarquent une lib entière pour 20 lignes de JS. Ici j'utilise Stimulus avec un controller minimaliste et un Twig Component pour rendre ça réutilisable n'importe où dans un projet Symfony.

Ce que ça démontre

  • Création d'un Twig Component avec la méthode mount()
  • Controller Stimulus avec targets et gestion aria
  • Accessibilité : aria-selected, role="tab", role="tabpanel"

Utilisation

<twig:Tabs :tabs="[...]" />
Code source
// templates/tabs_navigation.html.twig
<twig:TabsNavigation:Tabs :tabs="[
    { label: 'Onglet 1', content: 'Contenu...' },
    { label: 'Onglet 2', content: 'Contenu...' },
]" />
// src/Components/TabsNavigation/Tabs.php
#[AsTwigComponent('TabsNavigation:Tabs')]
class Tabs
{
    public array $tabs = [];
    public string $active = '';

    public function mount(array $tabs): void
    {
        $this->tabs = $tabs;
        $this->active = $tabs[0]['label'];
    }
}
Voir sur GitHub →