Mały skrypt (mniej niż 1.6 KB skompresowany i gzipped) z zerową liczbą zależności do tworzenia dostępnych komponentów zakładek akordeonowych.Oparty na dostępnym komponencie zakładek autorstwa @stowball.
Komponent jest akordeonem na mniejszych ekranach i przełącza się na widok zakładek na większych rzutniach.
Demo
Zobacz go w akcji tutaj.
Instalacja
Pobierz lub sklonuj
Pobierz najnowszą wersję lub git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Użycie
Po pierwsze, włącz https://github.com/matthiasott/a11y-accordion-tabs.js (lub wersję zminifikowaną) do swojego dokumentu:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Możesz napisać własne style od zera lub użyć pliku CSS w folderze docs jako punktu wyjścia i również włączyć go do swojego dokumentu.
<link rel="stylesheet" href="styles.css" />
Podstawowa struktura HTML dla komponentu accordion tabs wygląda następująco:
Aby zobaczyć wersję zaawansowaną, spójrz na demo.
Domyślnie skrypt wyszukuje wszystkie elementy z klasą js-tabs i automatycznie zamienia je w komponent akordeonowych zakładek.
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Opcje
a11y-accordion-tabs posiada kilka opcji, aby uczynić komponent bardziej elastycznym. Wszystkie opcje można ustawić za pomocą atrybutu data- lub właściwości JS w drugim argumencie konstruktora:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Jeśli tabsAllowed jest ustawione na false, komponent zawsze pozostaje akordeonem || breakpoint | Number | 640 | Określa punkt przerwania min. szerokości, w którym akordeon staje się komponentem zakładek. Upewnij się, że dostosowałeś również odpowiednio CSS. || selectedTab | Number | 0 | Ustawia zakładkę, która jest wybierana podczas inicjowania || startCollapsed | Boolean | false | Określa, czy akordeon powinien być zwinięty podczas uruchamiania |
Kompatybilność
Funkcje w skrypcie są obsługiwane przez wszystkie nowoczesne przeglądarki, w tym IE10+.Jeśli potrzebujesz wsparcia dla IE9, możesz chcieć użyć tej polyfill dla element.classList.
Changelog
0.5.0
- Nowa opcja
startCollapsed: Definiuje, czy akordeon powinien być zwijany przy uruchamianiu
0.4.1
- Poprawić eksport modułów CJS- Zaktualizować zależności, aby naprawić luki
0.4.0
- Atrybuty danych są teraz zgodne z konwencją nazewnictwa W3C (brak wielkich liter)- Poprawiono domyślne role arii w demonstracyjnym kodzie HTML- Symbole plus / minus zamiast szewronów w kodzie demonstracyjnym
0.3.2
- Update documentation
0.3.1
- Cleanup example HTML code
0.3.0
- Add support for multiple instances
- Update README with basic documentation
.