Ett litet skript (mindre än 1,6 KB komprimerat och gzippat) med noll beroenden för att skapa tillgängliga dragspelskomponenter.Baserat på den tillgängliga dragspelskomponenten av @stowball.
Komponenten är ett dragspel på mindre skärmar och växlar till en flikvy på större viewports.
Demo
Se den i aktion här.
Installation
Ladda ner eller klona
Ladda ner den senaste versionen eller git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Användning
Inkludera först https://github.com/matthiasott/a11y-accordion-tabs.js (eller den minifierade versionen) i ditt dokument:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Du kan skriva dina egna stilar från grunden eller använda CSS-filen i mappen docs som utgångspunkt och inkludera den också i ditt dokument.
<link rel="stylesheet" href="styles.css" />
Den grundläggande HTML-strukturen för komponenten för dragspelsflikar ser ut på följande sätt:
För en avancerad version kan du ta en titt på demoversionen.
Skriptet letar som standard efter alla element med klassen js-tabs och förvandlar dem automatiskt till en komponent för dragspelsflikar.Men du kan också instansiera komponenten i ditt JavaScript så här:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Alternativ
a11y-accordion-tabs levereras med några alternativ för att göra komponenten mer flexibel. Alla alternativ kan ställas in antingen via ett data--attribut eller en JS-egenskap på konstruktörens andra argument:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Om tabsAllowed är inställt på false förblir komponenten alltid ett dragspel || breakpoint | Number | 640 | Definierar den minsta breddbrytpunkt där dragspelet blir en tabkomponent. Se till att du också justerar CSS:en i enlighet med detta. || selectedTab | Number | 0 | Anger vilken flik som väljs vid start || startCollapsed | Boolean | false | Definierar om dragspelet ska fällas ihop vid start |
Kompatibilitet
Funktionerna i skriptet stöds av alla moderna webbläsare, inklusive IE10+.Om du behöver stöd för IE9 kan du använda denna polyfill för element.classList.
Changelog
0.5.0
- Nytt alternativ
startCollapsed: Definierar om dragspelet ska fällas ihop vid start
0.4.1
- Rättar export av CJS-moduler – Uppdaterar beroenden för att rätta till sårbarheter
0.4.0
- Dataattribut följer nu W3C:s namngivningskonventioner (inga stora bokstäver)- Förbättrad standard aria-role i demo HTML-koden- Plus/minus-symboler istället för chevrons i demokoden
0.3.2
- Uppdatera dokumentation
0.3.1
- Rensa upp exempel-HTML-kod
0.3.0
- Lägg till stöd för flera instanser
- Uppdatera README med grundläggande dokumentation
.