Locaweb Style

Documentação

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

Box de filtro

Elemento usado pra envolver elementos de formulário que filtram ou fazem alguma busca.

Filtro de período simples

Desktop

Mobile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="ls-box-filter">
  <form action="" class="ls-form ls-form-inline">
    <label class="ls-label col-md-3 col-sm-4">
      <b class="ls-label-text">Período</b>
      <input type="text" name="cel2" class="datepicker ls-daterange" id="datepicker1" data-ls-daterange="#datepicker2">
    </label>

    <label class="ls-label col-md-3 col-sm-4">
      <b class="ls-label-text">a</b>
      <input type="text" name="cel2" class="datepicker ls-daterange" id="datepicker2">
    </label>
    <div class="ls-actions-btn">
      <button type="button" class="ls-btn">Filtrar</button>
    </div>
  </form>
</div>

Filtro de período avançado

Desktop

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
44
45
<div class="ls-box-filter">
  <form action="" class="ls-form ls-form-inline">
    <input type="hidden" name="status" value="">
    <label class="ls-label col-md-4 col-sm-4">
      <b class="ls-label-text">Período</b>
      <div class="ls-custom-select">
        <select name="period" id="select_period" class="ls-select">
            <option>Hoje</option>
            <option>Ontem</option>
            <option>Última semana</option>
            <option>Últimos 30 dias</option>
            <option>Últimos 6 meses</option>
            <option>Últimos 12 meses</option>
            <option>Personalizado</option>
            <option>Locawebstyle é o framework da Locaweb</option>
        </select>
      </div>
    </label>
    <label class="ls-label col-md-2 col-sm-2">
      <span id="new_feature_custom_filter_2" data-ls-module="popover" data-content="Escolha o período desejado e clique em 'Filtrar'."></span>
      <input type="text" name="range_start" class="datepicker ls-daterange" placeholder="dd/mm/aaaa" id="datepicker3" data-ls-daterange="#datepicker4">
    </label>
    <label class="ls-label col-md-2 col-sm-2">
      <span id="new_feature_custom_filter_3" data-ls-module="popover" data-content="Clique em 'Filtrar' para exibir  o período selecionado."></span>
      <input type="text" name="range_end" class="datepicker ls-daterange" placeholder="dd/mm/aaaa" id="datepicker4">
    </label>
    <label class="ls-label col-md-1 col-sm-1">
      <input type="submit" class="ls-btn-primary" value="Filtrar">
    </label>
    <div data-ls-module="dropdown" class="ls-dropdown ls-float-right" id="step4">
      <a href="#" class="ls-btn" role="combobox" aria-expanded="false">Exportar</a>
      <ul class="ls-dropdown-nav" aria-hidden="true">
        <li>
          <a href="" role="option" tabindex="-1">CSV</a>
        </li>
        <li>
          <a data-action="open_modal_export" data-ls-module="modal" data-report-ext="XLS" data-target="#modal_export" href="" role="option" tabindex="-1">XLS</a>
        </li>
        <li>
          <a class="ls-divider" data-action="open_modal_export" data-ls-module="modal" data-target="#modal_exported_reports" data-url="/panel/exports" href="" id="link_exported_reports" role="option" tabindex="-1">Relatórios exportados</a>
        </li>
      </ul>
    </div>
  </form>
</div>

Filtro de status

Desktop

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
<div class="ls-box-filter">
  <form action="" class="ls-form ls-form-inline ls-float-left">
    <label class="ls-label col-md-8 col-sm-8">
      <b class="ls-label-text">Status</b>
      <div class="ls-custom-select">
        <select name="" class="ls-select">
          <option>Todos</option>
          <option>Ativos</option>
          <option>Desativados</option>
        </select>
      </div>
    </label>
  </form>

  <form  action="" class="ls-form ls-form-inline ls-float-right">
    <label class="ls-label" role="search">
      <b class="ls-label-text ls-hidden-accessible">Nome do cliente</b>
      <input type="text" id="q" name="q" aria-label="Faça sua busca por cliente" placeholder="Nome do cliente" required="" class="ls-field">
    </label>
    <div class="ls-actions-btn">
      <input type="submit" value="Buscar" class="ls-btn" title="Buscar">
    </div>
  </form>
</div>