Pieni skripti (alle 1.6 KB pakattuna ja gzipattuna), jossa ei ole riippuvuuksia esteettömien harmonikkavälilehti-komponenttien luomiseen. perustuu @stowballin esteettömään välilehtikomponenttiin.
Komponentti on harmonikka pienemmillä näytöillä ja siirtyy välilehtinäkymään suuremmilla näkymäalueilla.
Demo
Näe se toiminnassa täällä.
Asennus
Lataa tai kloonaa
Lataa uusin versio tai git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Käyttö
Lisää ensin https://github.com/matthiasott/a11y-accordion-tabs.js (tai pienennetty versio) dokumenttiisi:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Voit kirjoittaa omat tyylisi tyhjästä tai käyttää docs-kansiossa olevaa CSS-tiedostoa lähtökohtana ja sisällyttää sen myös dokumenttiisi.
<link rel="stylesheet" href="styles.css" />
Harmonikkavälilehdet-komponentin HTML-perusrakenne kuuluu seuraavasti:
Kehittyneemmälle versiolle tutustu demoon.
Oletusarvoisesti skripti etsii kaikki elementit, joilla on luokka js-tabs, ja muuttaa ne automaattisesti harmonikkavälilehdet-komponentiksi, mutta voit myös instantioida komponentin JavaScriptissäsi näin:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Options
a11y-accordion-tabs:n mukana tulee muutama optio, joiden avulla voit tehdä komponentista joustavamman. Kaikki vaihtoehdot voidaan asettaa joko data--attribuutilla tai JS-ominaisuudella konstruktorin toisessa argumentissa:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Jos tabsAllowed:n arvoksi asetetaan false, komponentti pysyy aina harmonikkakomponenttina || breakpoint | Number | 640 | Määrittää minimileveyden katkaisupisteen, jossa harmonikka muuttuu tabs-komponentiksi. Muista säätää myös CSS vastaavasti. || selectedTab | Number | 0 | Asettaa välilehden, joka on valittuna käynnistyksen yhteydessä || startCollapsed | Boolean | false | Määrittää, pitääkö harmonikka sulkea käynnistyksen yhteydessä |
Yhteensopivuus
Skriptin toimintoja tukevat kaikki nykyaikaiset selaimet, myös IE10+.Jos tarvitset tukea IE9:lle, kannattaa käyttää tätä polyfilliä element.classList.
Changelog
0.5.0
- Uusi vaihtoehto
startCollapsed: Määrittää, pitääkö harmonikka sulkea käynnistyksen yhteydessä
0.4.1
- Korjaa CJS-moduulin vienti – Päivitetään riippuvuudet haavoittuvuuksien korjaamiseksi
0.4.0
- Data-attribuutit noudattavat nyt W3C:n nimeämiskäytäntöjä (ei isoja kirjaimia)- Parannettu oletusarvoisia aria-rooleja demo-HTML-koodissa- Plus/miinus-symboleita sakaroiden sijaan demokoodissa
0.3.2
- Päivitetty dokumentaatio
0.3.1
- Puhdistettu esimerkki-HTML-koodia
0.3.0
- Lisätty tuki useille instansseille
- Päivitetty README-asiakirjaa, joka sisältää perusdokumentaation
.