Dropdown

Componente para agrupar listas de links.

1
2
3
4
5
6
7
8
9
10
11
<div data-ls-module="dropdown" class="ls-dropdown">
  <a href="#" class="ls-btn-primary">Users</a>

  <ul class="ls-dropdown-nav">
      <li><a href="#">John Hall</a></li>
      <li><a href="#">Piper Rollins</a></li>
      <li><a href="#">Emely Bender</a></li>
      <li><a href="#">Collin Palmer</a></li>
      <li><a href="#">Sonja James</a></li>
  </ul>
</div>

O botão de dropdown pode ser um <a> ou um <button>.

Estas são as classes funcionais usadas no dropbox.

Seletor	Descrição
.ls-dropdown	Vai no elemento pai da listagem de links, normalmente "div".
data-ls-module="dropdown"	Vai no elemento pai e ativará a função de dropdown na estrutura.

Desabilitando o droplist.

Basta inserir a classe .ls-disabled, no botão e assim desativa o dropdown.

1
2
3
4
5
6
7
8
<div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
  <a href="#" class="ls-btn-primary ls-disabled">Users</a>
  <ul class="ls-dropdown-nav">
      <li><a href="#">Edit</a></li>
      <li><a href="#">Config</a></li>
      <li><a href="#">Save</a></li>
  </ul>
</div>

Mudando a posição da droplist.

Basta inserir a classe .ls-pos-right, que o dropdown abre à direita do elemento.

1
2
3
4
5
6
7
8
<div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
  <a href="#" class="ls-btn-primary">Users</a>
  <ul class="ls-dropdown-nav">
      <li><a href="#">Edit</a></li>
      <li><a href="#">Config</a></li>
      <li><a href="#">Save</a></li>
  </ul>
</div>

Dropdown com link separado.

Utilizando a classe .ls-divider pra separar links dentro do droplist.

1
2
3
4
5
6
7
8
9
<div data-ls-module="dropdown" class="ls-dropdown">
  <a href="#" class="ls-btn-primary">Users</a>
  <ul class="ls-dropdown-nav">
    <li><a href="#">Edit</a></li>
    <li><a href="#">Config</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#" class="ls-color-danger ls-divider">Remove</a></li>
  </ul>
</div>

Dropdown com outros tamanhos.

Para alterar o tamanho dos botões, basta incluir as classes abaixo:

Nome	Resultado
ls-btn-lg	Users Edit Config Save Remove Edit Config Save Edit Config Save Edit Config Save Edit Config Save
ls-btn (tamanho default)	Users Edit Config Save Remove Edit Config Save Edit Config Save Edit Config Save Edit Config Save
ls-btn-sm	Users Edit Config Save Remove Edit Config Save Edit Config Save Edit Config Save Edit Config Save
ls-btn-xs	Users Edit Config Save Remove Edit Config Save Edit Config Save Edit Config Save Edit Config Save

Dropdown sem texto.

Basta deixar o link sem texto, conforme o exemplo abaixo.

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
<div data-ls-module="dropdown" class="ls-dropdown">
  <button  class="ls-btn"></button>
  <ul class="ls-dropdown-nav">
      <li><a href="#">Edit</a></li>
      <li><a href="#">Config</a></li>
      <li><a href="#">Save</a></li>
  </ul>
</div>
<div data-ls-module="dropdown" class="ls-dropdown">
  <a href="#" class="ls-btn-primary"></a>
  <ul class="ls-dropdown-nav">
      <li><a href="#">Edit</a></li>
      <li><a href="#">Config</a></li>
      <li><a href="#">Save</a></li>
  </ul>
</div>
<div data-ls-module="dropdown" class="ls-dropdown">
  <a href="#" class="ls-btn-dark"></a>
  <ul class="ls-dropdown-nav">
      <li><a href="#">Edit</a></li>
      <li><a href="#">Config</a></li>
      <li><a href="#">Save</a></li>
  </ul>
</div>
<div data-ls-module="dropdown" class="ls-dropdown">
  <a href="#" class="ls-btn-danger"></a>
  <ul class="ls-dropdown-nav">
      <li><a href="#">Edit</a></li>
      <li><a href="#">Config</a></li>
      <li><a href="#">Save</a></li>
  </ul>
</div>

Acessibilidade

Via javascript é adicionada as ARIAs abaixo:

Estado do dropdown	Elemento	Wai-aria
Aberto/Fechado	ls-dropdown-nav li a	role="option"
Aberto/Fechado	ls-dropdown [class*="ls-btn"]	role="combobox"
Aberto	ls-dropdown [class*="ls-btn"]	aria-expanded="true"
Fechado	ls-dropdown [class*="ls-btn"]	aria-expanded="false"
Aberto	ls-dropdown-nav	aria-hidden="false"
Fechado	ls-dropdown-nav	aria-hidden="true"

Eventos

Você pode escutar eventos de abre e fecha nos elementos de dropdown, veja a referência abaixo.

Evento	Descrição
dropdown:opened	Quando um dropdown abre, o evento `dropdown:opened` é disparado no elemento do módulo. Veja exemplo abaixo.
dropdown:closed	Quando um dropdown fecha, o evento `dropdown:closed` é disparado no elemento do módulo. Veja exemplo abaixo.

Exemplo:

1
2
3
4
5
6
7
8
9
// Um dropdown específico
$("#id-do-dropdown").on('dropdown:opened', function(){
  // do something
})

// Todos os elementos de dropdown
$(".ls-dropdown").on('dropdown:closed', function(){
  // do something
})

Locaweb Style

Documentação