Locaweb Style

Documentação

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

Box de Seleção

Elemento para ser utilizado em formulários ou páginas de cadastro, inclusão ou administração de itens. Ótimo para visualizar as opções disponíveis, se não forem muitas.

Quando usar?

- Há necessidade de escolher um item, entre vários disponíveis.

- Há necessidade de exibir todas as opções de uma vez, sem priorizar alguma delas.

Quando não usar?

- Há necessidade de exibir muitas opções.

- As opções são textos muito longos.





Os botões podem ter ou não <input> dentro dele.

Desktop

Conteúdo do A

Conteúdo do CN

Conteúdo do MX

Conteúdo do NS

Conteúdo do TXT

Conteúdo do SOA

Conteúdo do SRV

Conteúdo do AA

Conteúdo do PTR

Mobile

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
34
35
36
37
38
39
40
41
42
43

<div class="ls-tabs-btn">
  <ul class="ls-tabs-btn-nav">
    <li class="col-md-1 col-sm-4 col-xs-4 "><label class="ls-btn" data-ls-module="button" data-target="#tab1">A <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4"><label class="ls-btn" data-ls-module="button" data-target="#tab2">CN <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4"><label class="ls-btn" data-ls-module="button" data-target="#tab3">MX <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4 ls-active"><label class="ls-btn" data-ls-module="button" data-target="#tab4">NS <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4"><label class="ls-btn" data-ls-module="button" data-target="#tab5">TXT <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4"><label class="ls-btn" data-ls-module="button" data-target="#tab6">SOA <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4"><label class="ls-btn" data-ls-module="button" data-target="#tab7">SRV <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4"><label class="ls-btn" data-ls-module="button" data-target="#tab8">AA <input type="radio" name="btn"></label></li>
    <li class="col-md-1 col-sm-4 col-xs-4"><label class="ls-btn" data-ls-module="button" data-target="#tab9">PTR <input type="radio" name="btn"></label></li>
  </ul>

  <div class="ls-tabs-container">
    <div id="tab1" class="ls-tab-content">
      <p>Conteúdo do <b>A</b></p>
    </div>
    <div id="tab2" class="ls-tab-content">
      <p>Conteúdo do <b>CN</b></p>
    </div>
    <div id="tab3" class="ls-tab-content">
      <p>Conteúdo do <b>MX</b></p>
    </div>
    <div id="tab4" class="ls-tab-content">
      <p>Conteúdo do <b>NS</b></p>
    </div>
    <div id="tab5" class="ls-tab-content">
      <p>Conteúdo do <b>TXT</b></p>
    </div>
    <div id="tab6" class="ls-tab-content">
      <p>Conteúdo do <b>SOA</b></p>
    </div>
    <div id="tab7" class="ls-tab-content">
      <p>Conteúdo do <b>SRV</b></p>
    </div>
    <div id="tab8" class="ls-tab-content">
      <p>Conteúdo do <b>AA</b></p>
    </div>
    <div id="tab9" class="ls-tab-content">
      <p>Conteúdo do <b>PTR</b></p>
    </div>
  </div>
</div>





Desktop

Conteúdo Diário

Conteúdo Semanal

Conteúdo Mensal

Conteúdo Manual

Mobile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="ls-tabs-btn">
  <ul class="ls-tabs-btn-nav">
    <li class="col-md-2 col-xs-6 ls-active"><button class="ls-btn" data-ls-module="button" data-target="#tab1a"><span class="ls-ico-dashboard">Diária</span></button></li>
    <li class="col-md-2 col-xs-6"><button class="ls-btn" data-ls-module="button" data-target="#tab2a"><span class="ls-ico-calendar-check">Semanal</span></button></li>
    <li class="col-md-2 col-xs-6"><button class="ls-btn" data-ls-module="button" data-target="#tab3a"><span class="ls-ico-calendar">Mensal</span></button></li>
    <li class="col-md-2 col-xs-6"><button class="ls-btn" data-ls-module="button" data-target="#tab4a"><span class="ls-ico-cog">Manual</span></button></li>
  </ul>

  <div class="ls-tabs-container">
    <div id="tab1a" class="ls-tab-content ls-active">
      <p>Conteúdo <b>Diário</b></p>
    </div>
    <div id="tab2a" class="ls-tab-content">
      <p>Conteúdo <b>Semanal</b></p>
    </div>
    <div id="tab3a" class="ls-tab-content">
      <p>Conteúdo <b>Mensal</b></p>
    </div>
    <div id="tab4a" class="ls-tab-content">
      <p>Conteúdo <b>Manual</b></p>
    </div>
  </div>
</div>