Simple-tabs-js NPM

simple-tabs-js

Uma maneira rapida de implementar tabs em seu projeto web!!! Demo Page (Em desenvolvimento)

Instalação

Usando o NPM, instale e salve-o em seu package.json.

$ npm install simple-tabs-js

Importação

ES6 Importe os arquivos necessarios.

// importe simple-tabs-js no main.js ou como precisar

import SimpleTabs from 'path/to/simple-tabs-js'

// importe simple-tabs-js no main.scss ou como precisar
@include 'path/to/simple-tabs-js/dist/bundle';

Em uma projeto basico, baixe os arquivos e importe no final do documento: Download CSS Download JS
```
 <link rel="stylesheet" href="bundle.css">
 <script src="simpletabsjs.min.js"></script>
```

### Uso
#### 1 - Marcação HTML
A unica coisa que o simple-tabs necessita é uma estrutura HTML (exemplificada abaixo).
  - Por questão de semântica, a estrutura usa uma lista podendo ser ordenada ou não, contendo dentro de casa item uma âncora
    para navegação das tab.
  - Cada link deverá tem um `href` apontando para uma `div` através do `id`, como mostrado no exemplo.
  - "tab-default" será a primeira tab mostrada quando a pagina carregar, você podendo escolher qualquer uma da lista.

```html
<div minha-tab-fantastica> // aqui, esse atributo, podera ser da sua escolha, sendo usado posteriormente
  <ol tab-list>
    <li tab tab-default><a href="#eenie">Eenie</a></li>
    <li tab><a href="#meenie">Meenie</a></li>
    <li tab><a href="#miney">Miney</a></li>
    <li tab><a href="#mo">Mo</a></li>
  </ol>
  <div content-list>
    <div id="eenie">Eenie</div>
    <div id="meenie">Meenie</div>
    <div id="miney">Miney</div>
    <div id="mo">Mo</div>
  </div>
</div>

2 - Inicialize o simpls-tabs

Em seu arquivo JS, inicialize o simple-tabs passando o atributo definido anteriormente.

const minhaTabFantastica = new SimpleTabs('[minha-tab-fantastica]')

3 - Opções

Você pode passar um Objeto de configurações para alterar o estilo e comportamento padrão. Abaixo verá a configuração padrão.

const minhaTabFantastica = new SimpleTabs('[minha-tab-fantastica]', {
  preSet: 'default',
  minHeight: false,
  customHeight: '',
})

preSet é o estilo pre-definido, estando abaixo a lista com as opções atualmente disponiveis:
- default // Somente o CSS necesário para o funcionamento.
- 1 // Tabs Verticais.
- purple-rain // Horizontal com tema roxo
- green-lantern// Vertical com tema verde
minHeight é um "minHeight" colocado para nao interfeir ou "quebrar" seu projeto, sendo o tamanho da maior DIV dentro da estrutua, seu valor é Boleano.
customHeight como o nome ja diz, é um valor customizavel de altura da estrutura, por padrão ele é vazio, precisando caso use, passar em String o valor e a medida, Exemplo: customHeight: '100px'.

4 - Personalização (Divirta-se !!!)

Você pode adicionar classes a vontade na estrutura, apenas tomando cuidado para nao sobrescrever regras essenciais para o funcionamento, mas para isso será meio dificil.

<div minha-tab-fantastica>
  <ol tab-list>
    <li class="minha-tab" tab tab-default><a class="meu-link" href="#eenie"></a></li>
    <li class="minha-tab" tab><a class="meu-link" href="#meenie"></a></li>
    <li class="minha-tab" tab><a class="meu-link" href="#miney"></a></li>
    <li class="minha-tab" tab><a class="meu-link" href="#mo"></a></li>
  </ol>
  <div content-list>
    <div class="minha-div" id="eenie">Eenie</div>
    <div class="minha-div" id="meenie">Meenie</div>
    <div class="minha-div" id="miney">Miney</div>
    <div class="minha-div" id="mo">Mo</div>
  </div>
</div>