Modo escuro

Filters

Utilize o componente Filtros para permitir que os utilizadores refinem e personalizem a visualização de grandes conjuntos de dados ou listas, facilitando a localização de informações específicas. Este componente é essencial para melhorar a eficiência e a usabilidade em interfaces com grandes volumes de conteúdo.

Características Principais

Refinamento de Dados

Permite aos utilizadores restringir a visualização a itens que correspondem a critérios específicos.

Personalização

Oferece uma experiência personalizada, adaptando a apresentação dos dados às necessidades individuais dos utilizadores.

Variedade de Critérios

Pode incluir múltiplos tipos de filtros, como categorias, intervalos de datas, preços, tags, entre outros.

Exemplo de Utilização
  • Filtrar produtos por serviços, preço, entidades, etc.
  • Aplicações de gestão de dados para filtrar registros por status, data ou outras propriedades.
  • Sites de conteúdo para refinar resultados de pesquisa ou artigos por tags ou categorias.

Caso queira manter a caixa dos filtros aberta adicione a classe open à classe gra-filter-box.

Incorpore o componente Filtros sempre que precisar proporcionar uma forma eficiente para os utilizadores encontrarem informações específicas dentro de grandes conjuntos de dados, melhorando a navegabilidade e a satisfação do utilizador.

Exemplo 1

Filtrar Fechar
Exemplos: Nome, Descrição, Tipologia, Entidade.
Limpar filtros 
                                                    
<div class="gra-filter">
    <div class="gra-filter-content">
        <div class="gra-filter-input">
            <input type="text" class="gra-input-filter" placeholder="Pesquise aqui">
            <div id="suggestionsContainer" class="suggestions"></div>
            <a href="#" class="gra-link openFilter">
                <span class="desktop">Filtrar<span class="countFilters"></span></span>
                <span class="mobile"><i class="icon-filter filterIconMobile"></i>
                <span class="countFiltersMobile gra-badge error"></span></span>
            </a>
            <a href="#" class="gra-link closeFilter">
                <span class="desktop">Fechar<span class="countFilters"></span></span>
                <span class="mobile"><i class="icon-times closeIconMobile"></i><span class="countFiltersMobile gra-badge error"></span></span>
            </a>
            <button class="gra-btn btn-primary searchBtn desktop btn-primary-deactivated" disabled>Pesquisar</button>
            <button class="icon icon-primary searchBtn mobile icon-primary-deactivated" disabled><i class="icon-search closeIcon"></i></button>
        </div>
        <span class="caption">Exemplos: Nome, Descrição, Tipologia, Entidade.</span>
    </div>
    <div class="gra-filter-box open">
        <form action="#" class="gra-form-filter">
            <div class="gra-row-bs">
                <div class="gra-col-bs-xl-3">
                    <label for="default">Título do campo</label>
                    <input class="form form-control" type="text" placeholder="Introduza aqui o texto">
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select1">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select1">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select2">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select2">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
            </div>
            <div class="gra-row-bs">
                <div class="gra-col-bs-xl-3">
                    <label for="default">Título do campo</label>
                    <div class="gra-daterangepicker-container">
                        <input class="form form-control daterangepickerInput simpleDatePicker" placeholder="dd/mm/aaaa" type="text">
                    </div>
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select3">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select3">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select4">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select4">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
            </div>
        </form>
        <div class="gra-hr-horizontal-dark-s"></div>
        <div class="actions">
            <a href="#" class="gra-link clearFilter">Limpar filtros</a>
            <button class="gra-btn btn-primary submitFilter">Aplicar</button>
        </div>
    </div>
</div>

Exemplo 2

Tabela Lorem ipsum
Limpar filtros 
                                                    
<div class="gra-filter">
    <div class="gra-filter-content inlineFilter">
        <div class="gra-filter-input">
            <div class="title">Tabela Lorem ipsum</div>
            <div>
                <a href="#" class="gra-link openFilter">
                    <span class="desktop">Filtrar<span class="countFilters"></span></span>
                    <span class="mobile"><i class="icon-filter filterIconMobile"></i>
                    <span class="countFiltersMobile gra-badge error"></span></span>
                </a>
                <a href="#" class="gra-link closeFilter">
                    <span class="desktop">Fechar<span class="countFilters"></span></span>
                    <span class="mobile"><i class="icon-times closeIconMobile"></i><span class="countFiltersMobile gra-badge error"></span></span>
                </a>
            </div>
        </div>
        <div class="gra-hr-horizontal-light-s"></div>
    </div>
    <div class="gra-filter-box">
        <form action="#" class="gra-form-filter">
            <div class="gra-row-bs">
                <div class="gra-col-bs-xl-3">
                    <label for="default">Título do campo</label>
                    <input class="form form-control" type="text" placeholder="Introduza aqui o texto">
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select1">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select1">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select2">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select2">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
            </div>
            <div class="gra-row-bs">
                <div class="gra-col-bs-xl-3">
                    <label for="default">Título do campo</label>
                    <div class="gra-daterangepicker-container">
                        <input class="form form-control daterangepickerInput simpleDatePicker" placeholder="dd/mm/aaaa" type="text">
                    </div>
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select3">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select3">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
                <div class="gra-col-bs-xl-3">
                    <label for="select4">Título do campo</label>
                    <select class="gra-select gra-simple-select form-select" id="select4">
                        <option value="" selected>Selecione</option>
                        <option value="lorem1">Lorem ipsum 1</option>
                        <option value="lorem2">Lorem ipsum 2</option>
                        <option value="lorem3">Lorem ipsum 3</option>
                        <option value="lorem4">Lorem ipsum 4</option>
                    </select>
                </div>
            </div>
        </form>
        <div class="gra-hr-horizontal-dark-s"></div>
        <div class="actions">
            <a href="#" class="gra-link clearFilter">Limpar filtros</a>
            <button class="gra-btn btn-primary submitFilter">Aplicar</button>
        </div>
    </div>
</div>