Malý skript (méně než 1,6 KB komprimovaný a gzipovaný) s nulovými závislostmi pro vytvoření přístupné komponenty záložek.
Komponenta je na menších obrazovkách akordeonem a na větších viewportech se přepne do zobrazení záložek.
Demo
Podívejte se na ni v akci zde.
Instalace
Stáhnout nebo klonovat
Stáhněte si nejnovější verzi nebo git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Použití
Nejprve do svého dokumentu zahrňte https://github.com/matthiasott/a11y-accordion-tabs.js (nebo minifikovanou verzi):
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Můžete si napsat vlastní styly od začátku nebo použít soubor CSS ve složce docs jako výchozí bod a zahrnout ho do dokumentu také.
<link rel="stylesheet" href="styles.css" />
Základní struktura HTML pro komponentu harmonikových karet zní takto:
Pro pokročilou verzi se podívejte na ukázku.
Ve výchozím nastavení skript vyhledá všechny prvky s třídou js-tabs a automaticky z nich vytvoří komponentu akordeonové záložky, ale komponentu můžete v JavaScriptu instancovat také takto:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Možnosti
a11y-accordion-tabs je dodávána s několika možnostmi, díky kterým je komponenta flexibilnější. Všechny možnosti lze nastavit buď prostřednictvím atributu data-, nebo vlastnosti JS na druhém argumentu konstruktoru:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Pokud je tabsAllowed nastaveno na false, zůstane komponenta vždy akordeonem || breakpoint | Number | 640 | Určuje bod zlomu minimální šířky, kdy se z akordeonu stane komponenta tabs. Nezapomeňte také odpovídajícím způsobem upravit CSS. || selectedTab | Number | 0 | Nastavuje kartu, která je vybrána při spuštění || startCollapsed | Boolean | false | Definuje, zda se má akordeon při spuštění sbalit |
Kompatibilita
Funkce ve skriptu jsou podporovány všemi moderními prohlížeči včetně IE10+.Pokud potřebujete podporu pro IE9, můžete použít tuto polyfill pro element.classList.
Seznam změn
0.5.0
- Nová možnost
startCollapsed: Určuje, zda se má harmonika při spuštění sbalit
0.4.1
- Oprava exportu modulu CJS- Aktualizace závislostí pro opravu zranitelností
0.4.0
- Datové atributy nyní dodržují konvence pojmenování W3C (žádná velká písmena)- Vylepšeny výchozí aria-role v ukázkovém kódu HTML- Symboly plus/mínus místo chevronů v ukázkovém kódu
0.3.2
- Aktualizace dokumentace
0.3.1
- Zpřehlednění ukázkového HTML kódu
0.3.0
- Přidání podpory pro více instancí
- Aktualizace README se základní dokumentací
.