Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.
Abas são perfeitas para organizar informações em painéis de conteúdo, onde o acesso precisa ser rápido e quando há muito conteúdo sobre um determinado assunto.
| Seletor | Descrição |
|---|---|
| .ls-tabs-nav | Vai no elemento pai da navegação das abas, normalmente "ul". |
| data-ls-module="tabs" | Vai no elemento que servirá de "trigger" da ativação das abas, normalmente um link "a". |
| .ls-tab-container | Vai no elemento que servirá de "container" para o conteúdo das abas, normalmente uma "div". |
| .ls-tab-content | Vai no elemento que contém o conteúdo, normalmente uma "div". |
| .ls-active | É a classe que indica qual aba está ativa, ela vai na "li" ativa da navegação e também no ".ls-tab-content" ativo. |
Nobis qui veritatis quia id beatae magnam qui. id tenetur quos nulla voluptatum maxime rerum ut alias veniam veritatis expedita. saepe nam illo debitis. totam placeat ut perspiciatis quia voluptas debitis nemo. et fugit numquam voluptatum voluptatum fuga et possimus iste ex porro esse provident impedit illum
Sit et dolore est illum et quia aut laboriosam nihil optio ut. qui modi impedit vitae odit dolor adipisci voluptatem facilis iusto nobis. eum ut inventore et ipsam quia
Eveniet voluptatum ipsa quisquam aut earum repellendus et ad explicabo esse ducimus excepturi quidem id. qui voluptatem quia nobis eligendi. totam amet excepturi odio quia quo aut molestiae. eligendi quia fuga quia rerum non nobis provident voluptatem distinctio amet vel consectetur asperiores eum. dignissimos eius occaecati temporibus facilis maxime magni tempora quibusdam id eaque voluptatem consequatur commodi
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="ls-tabs-nav">
<li class="ls-active"><a data-ls-module="tabs" href="#track">Aba 1</a></li>
<li><a data-ls-module="tabs" href="#laps">Aba 2</a></li>
</ul>
<div class="ls-tabs-container">
<div id="track" class="ls-tab-content ls-active">
<p>Velit voluptatem porro nihil pariatur unde qui placeat maxime aut impedit voluptas quis qui consequatur. minima ullam sit libero ab velit et. laboriosam magnam facere corporis et rerum eos maiores provident voluptas adipisci impedit. asperiores ea doloribus quod atque incidunt tempore aut quisquam ipsa sed nesciunt ullam. libero et et voluptatem. deserunt autem velit ex error earum natus. nesciunt corporis nemo placeat et dolor atque</p>
<p>Nihil amet corrupti alias explicabo consequuntur occaecati sunt sint id repellat nemo quo voluptas dolor. quod explicabo aut cum. velit excepturi est minima qui dolores tempora est pariatur qui aut nesciunt. doloremque et tempore voluptas excepturi ut culpa amet</p>
</div>
<div id="laps" class="ls-tab-content">
<p>Inventore consectetur ad est praesentium dolorem et voluptatem quod ratione et aut molestiae voluptatem explicabo. corporis autem nam eos ab omnis qui nostrum eum ab iste distinctio. aut sit iusto eum in consectetur quisquam exercitationem dolorem sunt et</p>
</div>
</div>
Via javascript é adicionada as ARIAs abaixo:
| Estado da Aba | Elemento | Wai-aria |
|---|---|---|
| Fixa | ls-tabs-nav | role="tablist" |
| Fixa | .ls-tabs-nav a | role="tab" |
| Fixa | ls-tab-content | role="tabpanel" |
| Ativa | .ls-tabs-nav .ls-active a | aria-hidden="false" |
| Desativada | .ls-tabs-nav .ls-active a | aria-hidden="true" |
Em dispositivos com telas pequenas, a navegação das abas são apresentadas em forma de dropdown.
Não é comum, mas caso queira usar a navegação em forma de dropdown também em telas maiores, basta usar o html conforme exemplo abaixo, utilizando a classe .ls-dropdown-tabs. Perceba que apenas a parte da navegação muda, a parte do conteúdo continua da mesma forma.
In vitae veniam ipsum ad quisquam aut velit quisquam. enim explicabo ab voluptatem sunt quia nisi reiciendis esse repellendus facere veniam voluptatum laborum dignissimos. nobis ipsa quisquam ut. eum rerum nam earum debitis quas aut
Quisquam a repellendus fugiat natus. esse enim facere sed est officia asperiores. est repudiandae corporis non doloribus pariatur repudiandae est veniam ex aut. eum sapiente et dignissimos vitae corporis veritatis ipsa et quo. a aut dignissimos a distinctio enim commodi. dolores non ipsum enim rerum officiis nobis ut aliquam voluptates maiores. officiis alias quis quae voluptatem
Unde ad sint atque accusantium. iste natus quia sed saepe voluptatem excepturi eum. vero perferendis voluptas sint. assumenda unde quidem ab aut vitae nesciunt sint est maxime culpa qui at officia. molestiae nam rerum alias nulla molestiae debitis. et harum ipsa blanditiis fugit blanditiis quia natus cupiditate architecto est amet aliquid est
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div data-ls-module="dropdown" class="ls-dropdown-tabs">
<a data-ls-module="tabs" href="#tab1" class="ls-btn">Contratos x distribuídos</a>
<ul class="ls-tabs-nav ls-dropdown-nav in-dropdown" id="awesome-tab">
<li class="ls-active"><a data-ls-module="tabs" href="#tab1">Contratos x distribuídos</a></li>
<li><a data-ls-module="tabs" href="#tab2">Status de clientes</a></li>
</ul>
</div>
<div class="ls-tabs-container">
<div id="tab1" class="ls-tab-content ls-active">
<p>Quibusdam nisi voluptas necessitatibus veritatis et expedita mollitia quia doloribus blanditiis omnis id corrupti. est quia ut excepturi autem eos in omnis. accusamus natus vel quia vel recusandae animi. ipsum consectetur debitis autem molestiae nihil et excepturi dignissimos autem est non. explicabo quia dolor enim quae voluptatem itaque ipsam odit laudantium expedita. inventore facere sit aperiam et et tempora laudantium eos nihil distinctio facilis quidem rerum. molestiae distinctio beatae culpa non omnis eius quis explicabo distinctio sed optio illum et officia</p>
<p>Et voluptatem inventore consequatur rerum vitae est soluta. qui architecto aspernatur fuga aut esse quisquam consequatur pariatur nostrum pariatur error dolor corporis modi. et nesciunt aut fugiat maiores qui beatae et non voluptatem excepturi. id expedita occaecati nostrum repudiandae exercitationem sequi doloribus eaque quisquam ea sit odio incidunt doloribus</p>
</div>
<div id="tab2" class="ls-tab-content">
<p>Occaecati est cupiditate nesciunt aut ab. quod ea delectus commodi ut libero et provident voluptatem voluptas alias quia eos labore. dolor esse pariatur sed deleniti aliquid impedit nostrum laboriosam itaque iusto aut et minima. necessitatibus nam sit ut rerum enim ipsum eligendi amet rem quo. necessitatibus officia nisi ad incidunt eos qui sed maiores architecto explicabo expedita blanditiis. nihil eveniet dolores harum velit in occaecati</p>
</div>
</div>
Você também pode juntar os dois itens acima e fazer uma combinação de abas normais com abas em formato de dropdown. Para isso, a estrutura muda um pouco. Confira abaixo.
Et qui vel vero labore velit non sit tenetur nihil. illo incidunt ex aperiam nesciunt aliquid aut culpa illo sunt esse adipisci debitis nostrum atque. veritatis fugiat laborum libero ut et nihil ullam perferendis voluptatum
Quibusdam consequuntur sapiente voluptatibus repellat. voluptatem enim rem veniam fugit enim in qui consectetur fugit voluptas quis magni maiores nulla. consequuntur tempore ut corrupti nihil quis ut vel vitae quia reiciendis consequatur unde
Rem incidunt pariatur et vel aut et iusto in quasi. ab iste temporibus distinctio beatae molestiae consequuntur assumenda hic tempora quia debitis. itaque et dicta vel vel laborum dolorem sequi. dicta id error est placeat assumenda asperiores incidunt. ea neque nobis reiciendis dolor animi est sit eveniet ab labore et voluptatem vel quia. ipsa sint nostrum molestias eaque et earum rerum voluptatem reiciendis ipsam laudantium unde. ratione possimus modi eligendi non non accusamus
Quis sit rerum voluptatem voluptatem libero dolorem repellendus fuga quo omnis officiis fugit. et eius et qui odio ex architecto sit molestiae. nam optio aut necessitatibus illo sit necessitatibus quis aut. consequuntur rerum sunt aliquid quia et iure. aut minus harum placeat eaque enim expedita sit aspernatur corporis quia et assumenda inventore. maiores corporis impedit vel adipisci odit expedita possimus atque quae est sed. deserunt molestiae quia magnam sed officia sunt dolore ab
Ipsa necessitatibus enim dolorum. quaerat iusto facere culpa sit et rerum sunt. consequatur et accusantium quam ut. quibusdam quia neque inventore sed nulla velit vero velit sed. eum omnis accusamus molestiae
Veniam quisquam quidem dolor corporis quisquam sint soluta aut necessitatibus. quam facere a sit ipsam blanditiis adipisci. labore et quis vero minima nihil quis est delectus consequuntur. consequatur omnis placeat consequatur et voluptatem labore at
Minima velit ea fugiat inventore quibusdam. quidem et at maiores est suscipit sequi asperiores. quia fugit dicta quia dolores consectetur. veritatis rerum sapiente harum culpa temporibus dignissimos eum dolor eveniet nobis est. labore laborum numquam aliquam eos unde facilis
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<ul class="ls-tabs-nav" id="awesome-dropdown-tab">
<li class="ls-active"><a data-ls-module="tabs" href="#tab3">Aba 1</a></li>
<li><a data-ls-module="tabs" href="#tab4">Aba 2</a></li>
<li>
<div data-ls-module="dropdown" class="ls-dropdown-tabs">
<a data-ls-module="tabs" class="ls-btn">Aba 3</a>
<ul class="ls-tabs-nav ls-dropdown-nav in-dropdown">
<li><a data-ls-module="tabs" href="#tab5">Aba 3</a></li>
<li><a data-ls-module="tabs" href="#tab6">Aba 4</a></li>
<li><a data-ls-module="tabs" href="#tab7">Aba 5</a></li>
</ul>
</div>
</li>
</ul>
<div class="ls-tabs-container" id="awesome-tab-content">
<div id="tab3" class="ls-tab-content ls-active">
<p>Quo possimus rerum non recusandae ut rerum aut nemo praesentium pariatur. facere neque natus et doloremque quo. impedit at magnam qui quas veritatis dolorem est expedita voluptatem consequatur molestiae atque. vitae dignissimos et dolorum placeat</p>
<p>Est sed libero molestiae amet incidunt culpa a porro maxime accusamus repudiandae est inventore sint. pariatur soluta sit atque voluptates officiis aliquam. aut et fuga perferendis error dicta optio aut ut dolores laborum quam omnis amet quidem. quisquam ea minima sequi maxime porro quidem</p>
</div>
<div id="tab4" class="ls-tab-content">
<p>Et magnam quae sed non fugiat et molestiae labore unde rerum. rem amet debitis eos recusandae quasi aspernatur labore animi. qui cumque atque provident nulla placeat qui alias est et sint ex est est. illum distinctio quisquam veritatis minus ut nesciunt impedit consectetur sit vero. ipsum libero saepe repellat unde magnam vitae iure magni ipsum aut eveniet. saepe vero deserunt aut itaque sapiente. occaecati distinctio in et dolore dolor</p>
</div>
<div id="tab5" class="ls-tab-content">
<p>Facilis qui qui qui laboriosam saepe qui. tempore qui ut dolor a ratione voluptatum magnam eaque facere non. est expedita qui est</p>
<p>Est ea aut qui doloremque quo iste adipisci eos nisi qui. corporis cumque eum fugit aut culpa dignissimos. aperiam blanditiis dignissimos fugiat aut qui cupiditate odit eos aut sed. consectetur placeat officiis consequatur occaecati ipsum qui ea eius ut. ab et quas architecto accusamus magnam numquam pariatur maiores omnis. fuga ut qui ipsum iure consequatur qui</p>
</div>
<div id="tab6" class="ls-tab-content">
<p>Quia velit in consequuntur nam ut nisi neque voluptatem veritatis ipsa sit. est itaque perferendis corporis laudantium eum magni non commodi repellat reprehenderit sint. ut aliquam rerum et quasi eaque repellendus accusamus</p>
</div>
<div id="tab7" class="ls-tab-content">
<p>Est est dolor non facere ea omnis incidunt. modi qui hic occaecati non et autem accusamus delectus commodi nihil accusamus est libero. est voluptate minus exercitationem quisquam</p>
</div>
</div>
| Evento | Descrição |
|---|---|
| tab:activated | Quando uma aba é clicada, o evento |
| tab:deactivated | Quando uma aba que está ativa é clicada, o evento |
Exemplo:
1
2
3
$('[data-ls-module="tabs"]').on('tab:activated', function(){
// Do whatever you want.
});