Un script mic (mai puțin de 1,6 KB comprimat și gzipat) cu zero dependențe pentru crearea de componente de tab-uri acordeon accesibile.Bazat pe componenta de tab-uri accesibile de @stowball.
Componenta este un acordeon pe ecrane mai mici și trece la o vizualizare de tip tab pe vizualizări mai mari.
Demo
Veziți-l în acțiune aici.
Instalare
Descărcați sau clonați
Descărcați cea mai recentă versiune sau git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Utilizare
În primul rând, includeți https://github.com/matthiasott/a11y-accordion-tabs.js (sau versiunea minificată) în documentul dvs.:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Puteți să vă scrieți propriile stiluri de la zero sau să folosiți fișierul CSS din dosarul docs ca punct de plecare și să îl includeți și în documentul dvs.
<link rel="stylesheet" href="styles.css" />
Structura HTML de bază pentru componenta acordeon tabs sună după cum urmează:
Pentru o versiune avansată, aruncați o privire la demo.
În mod implicit, scriptul caută toate elementele cu clasa js-tabs și le transformă automat într-o componentă acordeon tabs. dar puteți, de asemenea, să instanțiați componenta în JavaScript-ul dvs. astfel:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Opțiuni
a11y-accordion-tabs vine cu câteva opțiuni pentru a face componenta mai flexibilă. Toate opțiunile pot fi setate fie printr-un atribut data-, fie printr-o proprietate JS pe al doilea argument al constructorului:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Dacă tabsAllowed este setat la false, componenta rămâne întotdeauna un acordeon || breakpoint | Number | 640 | Definește punctul de întrerupere a lățimii minime în care acordeonul devine o componentă tabs. Asigurați-vă că ajustați și CSS-ul în mod corespunzător. || selectedTab | Număr | Număr | 0 | Definește fila care este selectată la pornire || startCollapsed | Boolean | false | Definește dacă acordeonul trebuie să se prăbușească la pornire |
Compatibilitate
Funcțiile din script sunt acceptate de toate browserele moderne, inclusiv IE10+.Dacă aveți nevoie de suport pentru IE9, este posibil să doriți să utilizați acest polyfill pentru element.classList.
Changelog
0.5.0
- Opțiune nouă
startCollapsed: Definește dacă acordeonul trebuie să se prăbușească la pornire
0.4.1
- Fixează exportul de module CJS- Actualizează dependențele pentru a corecta vulnerabilitățile
0.4.1
- Fixează exportul de module CJS- Actualizează dependențele pentru a corecta vulnerabilitățile
0.4.0
- Atributele de date respectă acum convențiile de denumire W3C (fără litere majuscule)- Îmbunătățirea rolurilor de arie implicite în codul HTML demonstrativ- Simboluri plus / minus în loc de chevron în codul demonstrativ
0.3.2
- Actualizați documentația
0.3.1
- Curățați codul HTML de exemplu
0.3.0
- Adaugați suport pentru mai multe instanțe
- Actualizați README cu documentația de bază
.