Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Abas

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.

Qui ut nobis autem laborum maxime ut ratione et dolores voluptatem distinctio. ipsa sed et quo vero sunt reprehenderit. nihil ratione natus iste voluptatum quis inventore dolores sapiente. rem architecto et sed blanditiis aliquid error nobis quisquam sequi iste doloribus architecto accusantium. natus quibusdam aperiam tenetur numquam natus et quia quia. sed qui non ut eius illum omnis iste perspiciatis doloribus natus repellat iusto ea consectetur. cum rerum quibusdam expedita aperiam ipsam pariatur vero aut molestiae repudiandae

Itaque fugit quod tempora et qui ipsa repellendus minus. inventore nobis perferendis corporis tempora nemo possimus. id quisquam atque quo quia velit molestias modi dicta aliquid quis saepe voluptatibus dignissimos. explicabo minus dolores officia culpa veniam reprehenderit iure et sit et quos ut. accusantium adipisci qui occaecati hic cum et vel et quibusdam quia minima est. odit veritatis facilis perspiciatis vel cupiditate non

Sequi et autem autem voluptas. autem minus quo eum similique iusto mollitia fugiat dolorum aut repellat sint. sit et omnis est aspernatur velit maxime sed et. earum possimus est maxime hic aut nisi non quaerat. doloremque aut assumenda velit et voluptatem

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>Neque pariatur laudantium omnis pariatur sunt qui pariatur ut. fugit eum delectus modi eum totam voluptas ipsum dolor illum ut ratione facere accusamus. tenetur dolorum repudiandae reprehenderit quo fugiat. ratione et sunt quisquam eos necessitatibus quas fuga laudantium recusandae architecto. laborum adipisci omnis sunt fugit sed et. temporibus quia debitis commodi quia totam a sed delectus dignissimos nihil impedit</p>
    <p>Tenetur ex et quo alias earum qui. doloribus voluptatum veniam et inventore repellendus. dolor et iste quos adipisci earum iusto commodi qui omnis nobis earum et. quos id ut neque dignissimos molestiae dolores ea enim officiis ducimus perferendis laboriosam. quos deleniti itaque inventore et soluta. voluptate voluptatem est dolor nulla voluptate impedit. earum voluptatem nisi dolor est</p>
  </div>
  <div id="laps" class="ls-tab-content">
    <p>Fugit rem reiciendis aut. illum voluptate eum sint dolorum odit consequuntur. incidunt placeat vel veniam veniam voluptas vero eos non magnam modi ut et. deleniti rerum consequuntur rerum in natus quis iusto officiis velit</p>
  </div>
</div>

Acessibilidade

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"

Navegação de Abas em forma de dropdown

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.

Quia officia suscipit qui optio exercitationem. at tenetur ab error expedita quod voluptatem architecto non debitis. deserunt deserunt et possimus aut enim quis quo cumque voluptatem doloribus architecto illum tempora vitae. aperiam atque culpa dolorum doloremque occaecati qui nulla aperiam et voluptatem mollitia. iusto ut sunt corporis sunt quas dolorem. optio facilis possimus est non adipisci

Omnis temporibus consequatur iusto repudiandae voluptas est dolorum dolor animi dolorem. iusto eius laudantium beatae facilis veritatis ut officia voluptatibus sunt ea hic tempore aut. totam est repellat aut tempore ducimus voluptatem et cumque voluptatem vel. rem eos eum ut. non ut voluptatibus consequatur rem ducimus sunt quidem labore accusamus est dolorem consequuntur

Impedit non porro recusandae rem totam consectetur rerum repellendus perferendis quis quam. nihil sit quis consequuntur error earum totam possimus sit. totam possimus similique quia qui beatae. molestiae ad odio qui aut fuga eos aut. quibusdam numquam dolor ipsam sed modi ab sed minima ab autem autem eum voluptas. iure et aut et voluptatem voluptatum et dicta voluptatum nihil eos aspernatur et

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>Saepe et qui et vel. nemo aut cupiditate facilis harum perspiciatis. qui est voluptas numquam veritatis veniam neque aliquam. quam est vel consequuntur sit et unde ab tenetur velit quasi architecto. vero quibusdam pariatur eum error dolor dolorum aut neque vitae qui. quibusdam cumque cum assumenda exercitationem eos assumenda corrupti deserunt consequatur modi</p>
    <p>Quis assumenda ut est possimus labore iure nam consequatur. consequatur totam porro modi qui consequatur aut maxime voluptatem qui voluptatibus. architecto ullam laborum omnis sint magni rerum eius sit eum culpa. ipsam aperiam et et</p>
  </div>
  <div id="tab2" class="ls-tab-content">
    <p>Dolorem tempore et inventore ullam consequatur et voluptate consequatur rem. blanditiis nobis sequi eum laboriosam mollitia et quas asperiores nobis rem ea. eum perspiciatis dolores labore aliquam suscipit ut inventore est et eos aut accusamus ipsum dolor. magnam explicabo id sed hic molestiae quas iure. dolores ut inventore quo. amet illum placeat fugiat repellendus harum odio adipisci qui eaque at ipsam recusandae. corrupti porro est cupiditate incidunt et velit et soluta sed nisi libero voluptatem</p>
  </div>
</div>

Combinação de abas normais com dropdown

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.

Repellendus deserunt sed harum tenetur sint quod dolorem aut dolor dicta dolores in. ullam reiciendis ducimus ut est in dolorem. possimus odit quaerat nemo harum sed voluptatem reprehenderit

Voluptatibus omnis nulla sunt qui in quam culpa rerum et qui est sit. temporibus totam aspernatur facere est. fugit nisi nobis enim nobis voluptates corrupti sint impedit

Sunt qui omnis ipsa laborum. ut quod aut rerum aut cupiditate rerum voluptas et possimus voluptatibus. molestiae minus dolorem aut est ipsa

Tempora officiis et placeat. delectus at nisi quia vel. laboriosam qui ad ipsa quia dolores facilis rerum corrupti. qui ut pariatur quis nihil quibusdam doloremque aut ut hic voluptatibus eos voluptas aut. deleniti quia unde et velit qui animi omnis. vero laborum aut labore et corporis

Quos sunt sed harum similique nam officiis quidem eos et nulla. consequatur doloribus corporis dicta et aut placeat laudantium corrupti quisquam nam consequuntur rem sed quidem. autem cumque vel quia quia delectus pariatur soluta aliquid quas eligendi. rerum quia sit ut enim ipsa iste eos a excepturi exercitationem voluptatem deleniti non molestiae. commodi autem harum consequuntur ut praesentium nulla. aut placeat doloremque cumque dignissimos ea placeat modi pariatur voluptate

Minus qui ipsam sequi perferendis soluta debitis placeat officiis pariatur voluptates quisquam reprehenderit asperiores blanditiis. fugiat temporibus provident molestiae fugit omnis praesentium illo rerum repellat. sit repudiandae itaque impedit eos velit provident eligendi corporis quasi corporis. harum repellat ut eos deleniti commodi enim cum nulla dolor alias eum. laborum voluptatum magnam ut ad sapiente. ut rerum nemo et alias voluptas. aut sunt molestiae quis fugit et animi voluptas incidunt illo sunt minus

Eveniet dolore ipsum est illo sunt molestias et exercitationem. harum illo cupiditate modi incidunt. placeat qui praesentium aut dolores aut ullam magnam rerum sit aut corporis ut et magnam. porro omnis molestiae laborum unde dignissimos deleniti ipsam iure voluptas nostrum magni aspernatur

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>Dolorem tempora fugit illum itaque delectus et veniam cupiditate laudantium omnis enim similique. rerum incidunt neque dolorem rem nobis et est. quidem suscipit et laudantium qui nihil velit ducimus aut autem ipsam. rerum quasi adipisci soluta</p>
    <p>Eveniet impedit omnis aut eius. tenetur et et quasi saepe qui nostrum rerum. animi eveniet vitae incidunt accusamus et consequatur qui totam tempora corrupti commodi nesciunt enim. consequatur voluptatem placeat ducimus quo eos aut provident cupiditate aperiam officia. repellat sequi repudiandae sed qui non iusto repudiandae</p>
  </div>
  <div id="tab4" class="ls-tab-content">
    <p>Sint beatae consequatur quibusdam provident eos fugit labore dolores modi repellat rem. eos deleniti ut quasi consectetur ratione repudiandae qui vitae voluptatem aut amet et ipsam. aperiam placeat vel sequi nisi aut qui sint. adipisci et vero accusamus nobis dicta sunt inventore ex voluptates expedita unde aut alias consequuntur. dolorem sequi exercitationem minus non porro et perspiciatis consequatur esse. quae rerum quia officiis totam eos illum nam ut est soluta corrupti est consequatur. culpa tempora minus iusto qui aut facere reiciendis enim ea sint non</p>
  </div>
  <div id="tab5" class="ls-tab-content">
    <p>Magnam sit nemo quo rerum et cumque libero voluptatibus aut quia molestias quisquam. voluptatem id aut iure adipisci debitis voluptatum nobis ducimus. deserunt asperiores debitis et dolor dolorum aut. dolores sunt voluptas ut et harum quibusdam quod excepturi est cum</p>
    <p>A vero sint voluptas sed beatae ad laboriosam. enim labore commodi ut ex blanditiis ut recusandae facere illum distinctio. porro numquam repudiandae voluptatem praesentium necessitatibus vitae non</p>
  </div>
  <div id="tab6" class="ls-tab-content">
    <p>Et quidem voluptatum quis nihil maiores magni dignissimos voluptas ut. ducimus omnis porro ut ut dolorem vitae officiis perspiciatis. in qui quia voluptatem distinctio ratione necessitatibus dolorum aperiam molestiae repudiandae. debitis esse delectus alias consequatur quam quo. quis corrupti nihil facere earum deleniti. quidem doloremque est in sunt sed et soluta aut suscipit architecto accusamus animi aut vel</p>
  </div>
  <div id="tab7" class="ls-tab-content">
    <p>Commodi deserunt dolorem totam modi eligendi aut adipisci provident ducimus est ullam velit. exercitationem eligendi quisquam quia unde minus non quo sapiente eos ut vitae sint distinctio natus. alias consequatur eum delectus reiciendis vitae minima dolores cupiditate autem explicabo sapiente voluptatem. aut sequi saepe qui dolorum animi nobis asperiores</p>
  </div>
</div>

Eventos

Evento Descrição
tab:activated

Quando uma aba é clicada, o evento tab:activated é disparado.

tab:deactivated

Quando uma aba que está ativa é clicada, o evento tab:deactivated é disparado.

Exemplo:

1
2
3
  $('[data-ls-module="tabs"]').on('tab:activated', function(){
    // Do whatever you want.
  });