Filtro flessibile è un potente Bric personalizzato che ti consente di aggiungere filtri di contenuto in tempo reale a qualsiasi pagina web, è facile da usare e veloce da configurare.
Istruzioni per l’uso:
Una volta che hai acquistati e installato il Flexi Filter Bric, aggiungi semplicemente il Bric al tuo Blocs progetto utilizzando il Bric Bar, assegnare un ID gruppo e quindi assegnare lo stesso ID a ciascun elemento filtrabile utilizzando il metodo personalizzato attributo dei dati gruppo-filtro-dati.
È anche possibile filtrare gli elementi per tag utilizzando l'attributo dati tag-filtro-dati.
Attributi dei dati
La seguente usanza attributi dei dati sono supportati quando si utilizza il Flexi Filter Bric.
gruppo-filtro-dati = L'ID del gruppo che corrisponde al Flexi Filter Bric.
tag-filtro-dati = I tag in base ai quali viene filtrato un elemento; ogni tag deve essere separato da una virgola.
Controls
Flexi Filter offre un'ampia gamma di opzioni di personalizzazione che consentono di adattare non solo l'aspetto e il layout dei controlli del filtro, ma anche lo stile delle animazioni del filtro.
ID gruppo
Utilizzare questo controllo per impostare un ID univoco per l'istanza corrente di Flexi Filter. Lo stesso ID deve essere applicato a ciascun elemento filtrabile utilizzando l'attributo dati. gruppo-filtro-dati.
Articoli abbinati
Filtro utilizzando
Questo controllo consente di selezionare il modo in cui filtrare i risultati; sono disponibili tre opzioni.
Contenuto del testo = Gli elementi vengono filtrati in base al contenuto testuale in essi contenuto (le immagini utilizzano testo alternativo).
Attributo tag = Gli elementi vengono filtrati in base al contenuto impostato nell'attributo tag (tag-filtro-dati).
Testo e tag = Gli elementi vengono filtrati in base al contenuto del testo e degli attributi dei tag.
Campo di classe
Questo campo può essere utilizzato per assegnare una classe predefinita a ciascun elemento filtrato. Ciò consente di personalizzare l'aspetto e lo stile degli elementi filtrati utilizzando una classe personalizzata.
Articoli esclusi
Style
Questo controllo consente di personalizzare lo stile di animazione degli elementi esclusi; sono disponibili cinque opzioni.
Dissolvenza = Gli elementi esclusi svaniranno e poi diventeranno nascosti.
Nascondi = Gli elementi esclusi verranno nascosti immediatamente.
Strizzacervelli = Gli elementi esclusi si ridurranno di dimensioni e poi saranno nascosti.
muto = Gli elementi esclusi diventeranno semitrasparenti e rimarranno visibili.
Blur = Gli elementi esclusi diventeranno sfocati e rimarranno visibili.
Campo di inserimento
Forma
Questo controllo consente di impostare la forma del campo di input del filtro; sono disponibili quattro opzioni.
Dimensione iniziale
Questo controllo può essere utilizzato per impostare la dimensione iniziale del campo di input del filtro; sono disponibili tre opzioni.
Normale = Il campo di input viene inizialmente visualizzato a grandezza naturale.
Terapia = Inizialmente il campo di input viene visualizzato in modalità compatta; cliccandoci sopra, si espanderà fino a raggiungere la sua dimensione massima, consentendo all'utente di inserire una query di ricerca.
nascosto = Il campo di input è nascosto, questa opzione è pensata solo per il filtraggio del tag cloud.
Campo segnaposto
Utilizzare questo campo per impostare il testo segnaposto dei campi di input.
Icona
Style
Utilizzare questa opzione per impostare lo stile dell'icona della lente d'ingrandimento; è possibile scegliere tra otto stili.
Posizione
Utilizzare questa opzione per impostare la posizione di visualizzazione dell'icona; è possibile scegliere tra tre opzioni: sinistra, destra e nascosta.
Colore
Utilizzare questa opzione per impostare il colore dell'icona della lente di ingrandimento.
tag Cloud
Flexi Filter genererà automaticamente un tag cloud basato sul contenuto di tutti tag-filtro-dati attributi dei dati che si trovano negli elementi filtrabili con un ID gruppo corrispondente.
Posizione
Questo controllo consente di impostare la posizione del tag cloud; sono disponibili cinque opzioni.
Dopo il campo = Il tag cloud viene visualizzato dopo il campo di input sulla stessa riga.
Sopra il campo = Il tag cloud viene visualizzato sopra il campo di input.
Prima del campo = Il tag cloud viene visualizzato prima del campo di input sulla stessa riga.
Sotto il campo = Il tag cloud viene visualizzato sotto il campo di input.
nascosto = Il tag cloud è nascosto e non viene mostrato.
allineamento
Questo controllo consente di impostare l'allineamento orizzontale dei tag all'interno del tag cloud.
Forma
Questo controllo consente di impostare la forma dei tag all'interno del tag cloud; sono disponibili tre opzioni.
Selezione
Questo controllo consente di personalizzare il funzionamento della selezione dei tag; sono disponibili due opzioni.
multiplo = È possibile selezionare più tag modificando gli elementi filtrati.
Singolo = È possibile selezionare solo un singolo tag; quando si seleziona un altro tag, il tag selezionato in precedenza viene deselezionato.
Mostra barra di scorrimento
Questo controllo consente di attivare o disattivare la visibilità della barra di scorrimento nel Tag Cloud.
Classe di tag
Flexi Filter consente di personalizzare ulteriormente lo stile dei tag generati nel tag cloud utilizzando classi personalizzate.
Campo normale
Questo campo consente di impostare una singola classe che verrà applicata a tutti i tag.
Campo selezionato
Questo campo consente di impostare una singola classe che verrà applicata a tutti i tag selezionati.
Si prega di notare che quando si utilizzano le opzioni della classe di tag, tutti gli stili predefiniti dei tag Flexi Filter verranno rimossi dai pulsanti dei tag.
Tema scuro e chiaro
È possibile impostare il tema del campo di input e del tag cloud del Flexi Filter selezionando il contenitore padre del Flexi Filter Bric e impostando l'opzione Bootstrap Theme su scuro o chiaro. Si prega di notare che questa opzione è disponibile solo per Bootstrap 5 struttura.
Il filtro Flexi è disponibile per l'acquisto presso Blocs Negozio.