Filtro Flexi é um Bric personalizado poderoso que permite adicionar filtragem de conteúdo em tempo real a qualquer página da web, é fácil de usar e rápido de configurar.
Como usar
Depois de ter comprado e instalado o Flexi Filter Bric, basta adicionar o Bric ao seu Blocs projeto usando o Bric Bar, atribua um ID do Grupo e então atribuir o mesmo ID a cada item filtrável usando o personalizado atributo de dados grupo de filtros de dados.
Você também pode filtrar elementos por tag usando o atributo de dados tags de filtro de dados.
Atributos de dados
O seguinte costume atributos de dados são suportados ao usar o Flexi Filter Bric.
grupo de filtros de dados = O ID do grupo que corresponde ao Flexi Filter Bric.
tags de filtro de dados = As tags pelas quais um elemento é filtrado, cada tag deve ser separada por uma vírgula.
Controles
O Flexi Filter tem uma ampla gama de opções de personalização que permitem que você adapte não apenas a aparência e o layout dos controles do filtro, mas também o estilo das animações de filtragem.
ID do Grupo
Use este controle para definir um ID exclusivo para a instância atual do Flexi Filter. O mesmo ID deve ser aplicado a cada item filtrável usando o atributo de dados. grupo de filtros de dados.
Itens Combinados
Filtrar usando
Este controle permite que você selecione como os resultados são filtrados. Há três opções disponíveis.
Conteúdo de texto = Os itens são filtrados com base no conteúdo de texto encontrado neles (as imagens usam texto alternativo).
Atributo de tag = Os itens são filtrados com base no conteúdo definido no atributo tag (tags de filtro de dados).
Texto e Tags = Os itens são filtrados com base no texto e no conteúdo do atributo da tag.
Conteúdo aleatório
Quando ativado, este controle randomiza a ordem do conteúdo quando um filtro de pesquisa está ativo.
Campo de classe
Este campo pode ser usado para atribuir uma classe predefinida a cada item filtrado. Isso permite que você personalize a aparência e o estilo dos itens filtrados usando uma classe personalizada.
Itens Excluídos
Sessão de Fotos
Este controle permite que você personalize o estilo de animação dos itens excluídos. Há cinco opções disponíveis.
Desvanecer = Os itens excluídos desaparecerão e ficarão ocultos.
Esconder = Itens excluídos ficarão ocultos instantaneamente.
Encolher = Os itens excluídos diminuirão de tamanho e ficarão ocultos.
Mudo = Os itens excluídos ficarão semitransparentes e permanecerão visíveis.
borrão = Os itens excluídos ficarão desfocados e permanecerão visíveis.
Campo de entrada
Shape
Este controle permite que você defina o formato do campo de entrada do filtro. Há quatro opções disponíveis.
Tamanho inicial
Este controle pode ser usado para definir o tamanho inicial do campo de entrada do filtro. Há três opções disponíveis.
Normal = O campo de entrada é exibido inicialmente em seu tamanho total.
Compact = O campo de entrada é exibido inicialmente no modo compacto. Clicar nele fará com que ele se expanda para seu tamanho total, permitindo que o usuário insira uma consulta de pesquisa.
oculto = O campo de entrada está oculto, esta opção é destinada apenas à filtragem de nuvem de tags.
Campo de espaço reservado
Use este campo para definir o texto do espaço reservado dos campos de entrada.
ícone
Sessão de Fotos
Use esta opção para definir o estilo do ícone da lupa; há oito para escolher.
Posição
Use esta opção para definir a posição de exibição do ícone. Há três opções para escolher: esquerda, direita e oculto.
Cor
Use esta opção para definir a cor do ícone da lupa.
tag Cloud
O Flexi Filter irá gerar automaticamente uma nuvem de tags com base no conteúdo de todos tags de filtro de dados atributos de dados encontrados em itens filtráveis com um ID de grupo correspondente.
Posição
Este controle permite que você defina a posição da nuvem de tags. Há cinco opções disponíveis.
Depois do Campo = A nuvem de tags é exibida após o campo de entrada na mesma linha.
Acima do campo = A nuvem de tags é exibida acima do campo de entrada.
Antes do Campo = A nuvem de tags é exibida antes do campo de entrada na mesma linha.
Abaixo do campo = A nuvem de tags é exibida abaixo do campo de entrada.
oculto = A nuvem de tags está oculta e não é exibida.
Ataques XDR
Este controle permite que você defina o alinhamento horizontal das tags dentro da nuvem de tags.
Shape
Este controle permite que você defina o formato das tags dentro da nuvem de tags. Há três opções disponíveis.
Seleção
Este controle permite que você personalize como a seleção de tags funciona. Há duas opções disponíveis.
Múltiplo = Várias tags podem ser selecionadas alterando os itens filtrados.
Individual = Somente uma única tag pode ser selecionada. Quando outra tag é selecionada, a tag selecionada anteriormente é desmarcada.
Mostrar barra de rolagem
Este controle permite alternar a visibilidade da barra de rolagem na Nuvem de Tags.
Classe de etiqueta
O Flexi Filter permite que você personalize ainda mais o estilo das tags geradas na nuvem de tags usando classes personalizadas.
Campo Normal
Este campo permite que você defina uma única classe que será aplicada a todas as tags.
Campo Selecionado
Este campo permite que você defina uma única classe que será aplicada a todas as tags selecionadas.
Observe que, ao usar as opções de classe de tag, todos os estilos de tag padrão do Flexi Filter serão removidos dos botões de tag.
Tema escuro e claro
Você pode definir o tema do campo de entrada do Flexi Filter e da nuvem de tags selecionando o contêiner pai do Flexi Filter Bric e definindo a opção Tema Bootstrap como escuro ou claro. Observe que esta opção está disponível apenas para Bootstrap 5 estrutura.
O filtro Flexi está disponível para compra na Blocs Loja.