Et lille script (mindre end 1,6 KB komprimeret og gzippet) med nul afhængigheder til at skabe tilgængelige komponenter til harmonikafaner.Baseret på den tilgængelige komponent til faner af @stowball.
Komponenten er en harmonika på mindre skærme og skifter til en fanebladvisning på større visningsvinduer.
Demo
Se den i aktion her.
Installation
Download eller klon
Download den seneste version eller git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Anvendelse
Inkluder først https://github.com/matthiasott/a11y-accordion-tabs.js (eller den minificerede version) i dit dokument:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Du kan skrive dine egne stilarter fra bunden eller bruge CSS-filen i mappen docs som udgangspunkt og inkludere den også i dit dokument.
<link rel="stylesheet" href="styles.css" />
Den grundlæggende HTML-struktur for harmonikafanebladskomponenten lyder som følger:
For en avanceret version skal du se på demoen.
Scriptet leder som standard efter alle elementer med klassen js-tabs og omdanner dem automatisk til en harmonikafaneblade-komponent, men du kan også instantiere komponenten i dit JavaScript på følgende måde:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Indstillinger
a11y-accordion-tabs leveres med et par indstillinger, der gør komponenten mere fleksibel. Alle indstillinger kan indstilles via enten en data--attribut eller en JS-egenskab på det andet argument i konstruktøren:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Hvis tabsAllowed er indstillet til false, forbliver komponenten altid en harmonika || breakpoint | Number | 640 | Definerer det mindste bredde-brydepunkt, hvor harmonikaen bliver til en faneblad-komponent. Sørg for også at justere CSS’en i overensstemmelse hermed. || selectedTab | Number | 0 | Indstiller den fane, der er valgt ved init || startCollapsed | Boolean | false | Definerer, om harmonikaen skal klappes sammen ved opstart |
Kompatibilitet
Funktionerne i scriptet understøttes af alle moderne browsere, herunder IE10+.Hvis du har brug for understøttelse af IE9, bør du måske bruge denne polyfill til element.classList.
Changelog
0.5.0
- Ny indstilling
startCollapsed: Definerer, om harmonikaen skal klappes sammen ved opstart
0.4.1
- Fix CJS module export- Opdaterer afhængigheder for at rette sårbarheder
0.4.0
- Dataattributter følger nu W3C-navnekonventionerne (ingen store bogstaver)- Forbedrede standard aria-roler i demo HTML-koden- Plus/minussymboler i stedet for chevrons i demokoden
0.3.2
- opdaterer dokumentation
0.3.1
- oprydning af eksempel-HTML-kode
0.3.0
- tilføjer understøttelse af flere instanser
- opdaterer README med grundlæggende dokumentation