Een klein script (minder dan 1.6 KB gecomprimeerd en gzipped) met nul afhankelijkheden voor het maken van toegankelijke accordeon tabs componenten.Gebaseerd op de toegankelijke tabs component door @stowball.
De component is een accordeon op kleinere schermen en schakelt over naar een tabweergave op grotere viewports.
Demo
Zie het hier in actie.
Installatie
Download of kloon
Download de laatste versie of git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Gebruik
Eerst https://github.com/matthiasott/a11y-accordion-tabs.js (of de geminificeerde versie) in uw document opnemen:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
U kunt uw eigen stijlen vanaf nul schrijven of het CSS-bestand in de docs-map gebruiken als uitgangspunt en ook in uw document opnemen.
<link rel="stylesheet" href="styles.css" />
De basis HTML structuur voor de accordeon tabs component ziet er als volgt uit:
Voor een geavanceerde versie bekijk de demo eens.
Het script zoekt standaard naar alle elementen met de class js-tabs en maakt er automatisch een accordeon tabs component van.Maar je kunt de component ook als volgt in je JavaScript instantiëren:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Opties
a11y-accordion-tabs wordt geleverd met een aantal opties om de component flexibeler te maken. Alle opties kunnen worden ingesteld via een data--attribuut of een JS-eigenschap op het tweede argument van de constructor:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Als tabsAllowed is ingesteld op false, blijft de component altijd een accordeon || breakpoint | Number | 640 | Bepaalt het min. breedte-breekpunt waar de accordeon een tabs component wordt. Zorg ervoor dat u ook de CSS dienovereenkomstig aanpast. || selectedTab | Number | 0 | Stelt de tab in die is geselecteerd bij het opstarten || startCollapsed | Boolean | false | Bepaalt of de accordeon moet worden samengevouwen bij het opstarten |
Compatibility
De functies in het script worden ondersteund door alle moderne browsers, inclusief IE10+.Als u ondersteuning nodig heeft voor IE9, kunt u het beste deze polyfill gebruiken voor element.classList.
Changelog
0.5.0
- Nieuwe optie
startCollapsed: Definieert of de accordeon moet worden samengevouwen bij het opstarten
0.4.1
- Fix CJS module export- Update afhankelijkheden om kwetsbaarheden te verhelpen
0.4.0
- Data-attributen volgen nu de W3C-naamgevingsconventies (geen hoofdletters)- Verbeterde standaard aria-rollen in de demo-HTML-code- Plus / min-symbolen in plaats van chevrons in de demo-code
0.3.2
- Update documentatie
0.3.1
- Schoonmaak voorbeeld HTML code
0.3.0
- Ondersteuning toevoegen voor meerdere instanties
- Update README met basisdocumentatie