Un piccolo script (meno di 1.6 KB compresso e gzippato) con zero dipendenze per creare componenti accessibili per schede a fisarmonica.
Il componente è una fisarmonica su schermi più piccoli e passa ad una visualizzazione a schede su viewport più grandi.
Demo
Vedilo in azione qui.
Installazione
Scarica o clona
Scarica l’ultima versione o git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Uso
Primo, includi https://github.com/matthiasott/a11y-accordion-tabs.js (o la versione minificata) nel tuo documento:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Puoi scrivere i tuoi stili da zero o usare il file CSS nella cartella docs come punto di partenza e includerlo nel tuo documento.
<link rel="stylesheet" href="styles.css" />
La struttura HTML di base per il componente accordion tabs è la seguente:
Per una versione avanzata dai un’occhiata alla demo.
Di default, lo script cerca tutti gli elementi con la classe js-tabs e li trasforma automaticamente in un componente accordion tabs.Ma puoi anche istanziare il componente nel tuo JavaScript in questo modo:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Opzioni
a11y-accordion-tabs è dotato di alcune opzioni per rendere il componente più flessibile. Tutte le opzioni possono essere impostate tramite un attributo data- o una proprietà JS sul secondo argomento del costruttore:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Se tabsAllowed è impostato a false, il componente rimane sempre una fisarmonica || breakpoint | Number | 640 | Definisce il punto di rottura della larghezza minima in cui la fisarmonica diventa un componente tabs. Assicurati di regolare anche il CSS di conseguenza. || selectedTab | Number | 0 | Imposta la scheda selezionata all’avvio || startCollapsed | Boolean | false | Definisce se la fisarmonica deve essere compressa all’avvio |
Compatibilità
Le funzioni dello script sono supportate da tutti i browser moderni, incluso IE10+.Se hai bisogno del supporto per IE9, potresti voler usare questo polyfill per element.classList.
Changelog
0.5.0
- Nuova opzione
startCollapsed: Definisce se la fisarmonica deve essere chiusa all’avvio
0.4.1
- Fix CJS module export- Aggiorna le dipendenze per correggere le vulnerabilità
0.4.0
- Gli attributi dei dati ora seguono le convenzioni di denominazione W3C (senza lettere maiuscole)- Miglioramento dei ruoli d’aria predefiniti nel codice HTML demo- Simboli più/meno al posto dei chevron nel codice demo
0.3.2
- Aggiornamento della documentazione
0.3.1
- Pulitura del codice HTML di esempio
0.3.0
- Aggiungi supporto per istanze multiple
- Aggiornamento del README con documentazione base