Tabs in Vue.js
In questa lezione creiamo un esercizio per gestire le tabs in Vue.js. Le “tabs” sono solitamente utilizzati per creare interfacce utente con più schede, dove ogni scheda contiene un insieme di contenuti separati. Può essere utile ad esempio per organizzare e visualizzare diverse sezioni di informazioni o funzionalità all’interno di un’applicazione web.
Ci sono diverse librerie e approcci per creare tabs in Vue.js, ma vediamo un esempio di come poterli implementare usando i componenti Vue.js.
Esempio di tabs in Vue.js
In questo primo esempio creiamo un unico componente per la gestione delle tabs. Realizziamo un template, con due button che, quando cliccati, cambiano il valore di activeTab rispettivamente a ‘tab1’ e ‘tab2’. Poi in un div insieramo due paragrafi che costituiscono il contenuto delle due tabs.
A questi paragrafi ho assegnato una direttiva :class che imposta la classe CSS ‘active’ in base a quale tab è attivo. In questo modo, quando activeTab è uguale a ‘tab1’, il primo paragrafo riceverà la classe ‘active’ e quindi sarà visualizzato. Allo stesso modo, quando activeTab è uguale a ‘tab2’, il secondo paragrafo verrà visualizzato.
Mostra Tab 1 Mostra Tab 2
Contenuto Tab 1
Continua la lettura su: https://www.codingcreativo.it/tabs-in-vue-js/ Autore del post: Cristina Parma Fonte:
