Dopo averlo fatto e rifatto per svariate volte, oggi scrivo un “articolo-promemoria” su come creare un sistema a “Tab” con HTML, TailwindCSS e Javascript.
I sistemi a “Tab” sono una funzione comune in molti siti web moderni e sono un ottimo modo per organizzare e visualizzare il contenuto in modo chiaro e conciso. In questo articolo spiegherò il processo di creazione di un sistema a “Tab” personalizzato utilizzando le tecnologie web fondamentali, come HTML, CSS e Javascript.
Visto che mi conosco e se non sarà una guida “semplice” la schiferò dovrò adottare un approccio passo passo, con esempi di codice e suggerimenti pratici per capire come funziona il sistema a “Tab” e come eventualmente personalizzarlo per soddisfare le esigenze del cliente.Iniziamo.
Sistema a Tab con Tailwind CSS: Installare TailwindCSS
Tailwind CSS è framework CSS installabile in vari modi, per conoscerli tutti è sufficiente fare riferimento alla documentazione ufficiale.
Per il mio progetto ho effettuato l’installazione con il CLI di Tailwind, quindi installazione base con NPM. Potete utilizzare anche la CDN per “fare prima”.
Sistema a Tab con Tailwind CSS: Il codice spiegato
HTML
Nel codice HTML è importante rispettare la gerarchia anche se sostanzialmente vedremo che le classi fondamentali sono soltanto tab-btn e tab-pane, rispettivamente il Bottone del Tab e il Wrapper del contenuto.
Da notare il fatto che il primo elemento Bottone e il primo elemento Wrapper hanno la classe .active che ci aiuterà a fare capire all’utente quale delle Tab ha selezionato e al Javascript quale mostrare.
Importante: gli attributi data-tab sono coloro che permettono al Javascript di scegliere uno piuttosto che l’altro Tab Wrapper.
Se desiderate trovate il codice completo sul mio Github: Tabs con TailwindCSS, HTML e Vanilla JS.