Egy kis szkript (kevesebb, mint 1.6 KB tömörítve és gzippelve) nulla függőséggel hozzáférhető harmonika füles komponensek létrehozásához.@stowball hozzáférhető füles komponense alapján.
A komponens kisebb képernyőkön egy harmonika, nagyobb nézetablakokon pedig tab nézetre vált.
Demo
Nézze meg működés közben itt.
Telepítés
Letöltés vagy klónozás
Töltse le a legújabb verziót vagy git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Használat
Először is, építsd be a https://github.com/matthiasott/a11y-accordion-tabs.js (vagy a kicsinyített változatát) a dokumentumodba:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
A saját stílusaidat megírhatod a semmiből, vagy használhatod a docs mappában lévő CSS fájlt kiindulási pontként, és azt is beépítheted a dokumentumodba.
<link rel="stylesheet" href="styles.css" />
A harmonika fülek komponens alapvető HTML szerkezete a következőképpen néz ki:
A haladó változathoz nézd meg a demót.
A szkript alapértelmezés szerint minden js-tabs osztályú elemet megkeres, és automatikusan harmonika lapok komponenssé alakítja őket, de a komponens a JavaScriptben is instanciálható így:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Opciók
a11y-accordion-tabs tartalmaz néhány opciót a komponens rugalmasabbá tételéhez. Minden opciót vagy egy data- attribútumon vagy a konstruktor második argumentumának JS tulajdonságán keresztül lehet beállítani:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Ha a tabsAllowed értéke false, a komponens mindig harmonika marad || breakpoint | Number | 640 | Meghatározza a minimális szélességű töréspontot, ahol a harmonika tabs komponenssé válik. Győződjön meg róla, hogy a CSS-t is ennek megfelelően állítja be. || selectedTab | Number | 0 | Beállítja az indításkor kiválasztott lapot || startCollapsed | Boolean | false | Meghatározza, hogy a harmonika indításkor össze legyen-e hajtva |
Kompatibilitás
A szkriptben található funkciókat minden modern böngésző támogatja, beleértve az IE10+-t is.Ha szüksége van az IE9 támogatására, akkor érdemes ezt a polyfill-t használni element.classList.
Changelog
0.5.0
- Új opció
startCollapsed: Meghatározza, hogy a harmonika indításkor összecsukódjon-e
0.4.1
- Fix CJS modul export- Függőségek frissítése a sebezhetőségek javítására
0.4.0
- Az adatattribútumok mostantól a W3C elnevezési konvenciókat követik (nincsenek nagybetűk)- Javított alapértelmezett aria-szerepek a demo HTML kódban- Plusz/mínusz szimbólumok helyett ékzárak a demo kódban
0.3.2
- Dokumentáció frissítése
0.3.1
- Példa HTML kód tisztítása
0.3.0
- több példány támogatásának hozzáadása
- README frissítése alapvető dokumentációval
.