Um pequeno script (menos de 1.6 KB comprimido e gzipado) com zero dependências para criar componentes acessíveis de abas de acordeão.
O componente é um acordeão em telas menores e muda para uma vista de abas em viewports maiores.
Demo
Veja-o em ação aqui.
Instalação
Download ou clone
Download da versão mais recente ou git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Uso
Primeiro, inclua https://github.com/matthiasott/a11y-accordion-tabs.js (ou a versão minificada) no seu documento:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Pode escrever os seus próprios estilos a partir do zero ou usar o ficheiro CSS na pasta docs como ponto de partida e incluí-lo também no seu documento.
<link rel="stylesheet" href="styles.css" />
A estrutura HTML básica para o componente de abas do acordeão é a seguinte:
Para uma versão avançada, dê uma olhada na demonstração.
Por defeito, o script procura todos os elementos com a classe js-tabs e transforma-os automaticamente num componente de abas de acordeão. Mas também pode instanciar o componente no seu JavaScript desta forma:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Opções
a11y-accordion-tabs vem com algumas opções para tornar o componente mais flexível. Todas as opções podem ser definidas através de um atributo data- ou uma propriedade JS no segundo argumento do construtor:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Se tabsAllowed estiver definido para false, o componente permanece sempre um acordeão ||| breakpoint | Number | 640 | Define o ponto de quebra da largura mínima onde o acordeão se torna um componente tabs. Certifique-se também de ajustar o VCC em conformidade. || selectedTab | Number | 0 | Define o separador que está seleccionado no init || startCollapsed | Boolean | false | Define se o acordeão deve ser colapsado na inicialização |
Compatibilidade
As funções no script são suportadas por todos os browsers modernos, incluindo o IE10+.Se você precisar de suporte para o IE9, você pode querer usar este polyfill para element.classList.
Changelog
0.5.0
- Nova opção
startCollapsed: Define se o acordeão deve ser colapsado na inicialização
0.4.1
- Exportação do módulo CJS-Fix – Atualizar dependências para corrigir vulnerabilidades
0.4.0
- Atributos de dados agora seguem as convenções de nomenclatura do W3C (sem letras maiúsculas)- Melhora aria-roles padrão no código HTML demo- Símbolos mais / menos em vez de chevrons no código demo
0.3.2
- Atualizar documentação
0.3.1
- Código HTML de exemplo de limpeza
0.3.0
- Adicionar suporte para múltiplas instâncias
- Atualizar README com documentação básica