Filtre flexible est un puissant Bric personnalisé qui vous permet d'ajouter un filtrage de contenu en temps réel à n'importe quelle page Web, il est facile à utiliser et rapide à configurer.
Comment utiliser
Une fois que vous avez acheté ou Installé le Flexi Filter Bric, ajoutez simplement le Bric à votre Blocs projet utilisant la barre Bric, attribuez un ID de groupe puis attribuez le même ID à chaque élément filtrable à l'aide de la personnalisation attribut de données groupe de filtres de données.
Vous pouvez également filtrer les éléments par balise à l'aide de l'attribut data balises de filtrage de données.
Attributs de données
La coutume suivante attributs de données sont pris en charge lors de l'utilisation du Flexi Filter Bric.
groupe de filtres de données = L'ID de groupe qui correspond au Flexi Filter Bric.
balises de filtrage de données = Les balises par lesquelles un élément est filtré, chaque balise doit être séparée par une virgule.
Contrôles
Flexi Filter dispose d'une large gamme d'options de personnalisation qui vous permettent de personnaliser non seulement l'apparence et la disposition des commandes de filtre, mais également le style des animations de filtrage.
ID de groupe
Utilisez ce contrôle pour définir un identifiant unique pour l'instance actuelle de Flexi Filter. Ce même identifiant doit être appliqué à chaque élément filtrable via l'attribut de données. groupe de filtres de données.
Articles correspondants
Filtrer à l'aide de
Ce contrôle vous permet de sélectionner la manière dont les résultats sont filtrés, trois options sont disponibles.
Contenu du texte = Les éléments sont filtrés en fonction du contenu textuel qu'ils contiennent (les images utilisent du texte alternatif).
Attribut de balise = Les éléments sont filtrés en fonction du contenu défini dans l'attribut de balise (balises de filtrage de données).
Texte et balises = Les éléments sont filtrés en fonction du contenu du texte et des attributs de balise.
Champ de classe
Ce champ permet d'attribuer une classe prédéfinie à chaque élément filtré. Cela vous permet de personnaliser l'apparence et le style des éléments filtrés grâce à une classe personnalisée.
Articles exclus
Style
Ce contrôle vous permet de personnaliser le style d'animation des éléments exclus, cinq options sont disponibles.
S'effacer = Les éléments exclus disparaîtront puis deviendront masqués.
Cacher = Les éléments exclus seront instantanément masqués.
Rétrécir = Les éléments exclus rétréciront en taille puis deviendront masqués.
Muet = Les éléments exclus deviendront semi-transparents et resteront visibles.
tache = Les éléments exclus deviendront flous et resteront visibles.
Champ de saisie
Forme
Ce contrôle vous permet de définir la forme du champ de saisie du filtre, quatre options sont disponibles.
Taille de départ
Ce contrôle peut être utilisé pour définir la taille initiale du champ de saisie du filtre, trois options sont disponibles.
Normale = Le champ de saisie est initialement affiché à sa taille maximale.
Compact = Le champ de saisie est initialement affiché en mode compact, cliquer dessus le fera s'agrandir à sa taille maximale, permettant à l'utilisateur de saisir une requête de recherche.
caché = Le champ de saisie est masqué, cette option est destinée uniquement au filtrage du nuage de tags.
Champ d'espace réservé
Utilisez ce champ pour définir le texte d'espace réservé des champs de saisie.
Icône
Style
Utilisez cette option pour définir le style de l'icône de la loupe, vous avez le choix entre huit options.
Poste
Utilisez cette option pour définir la position d'affichage de l'icône, vous avez le choix entre trois options : gauche, droite et masqué.
Couleur
Utilisez cette option pour définir la couleur de l’icône de la loupe.
Tag Cloud
Flexi Filter générera automatiquement un nuage de tags basé sur le contenu de tous balises de filtrage de données attributs de données trouvés sur des éléments filtrables avec un ID de groupe correspondant.
Poste
Ce contrôle vous permet de définir la position du nuage de tags, cinq options sont disponibles.
Après le terrain = Le nuage de tags s'affiche après le champ de saisie sur la même ligne.
Au-dessus du champ = Le nuage de tags s'affiche au-dessus du champ de saisie.
Avant le terrain = Le nuage de tags s'affiche avant le champ de saisie sur la même ligne.
Sous le champ = Le nuage de tags s'affiche sous le champ de saisie.
caché = Le nuage de tags est masqué et non affiché.
Alignement
Ce contrôle vous permet de définir l'alignement horizontal des balises dans le nuage de balises.
Forme
Ce contrôle vous permet de définir la forme des balises dans le nuage de balises, trois options sont disponibles.
Sélection
Ce contrôle vous permet de personnaliser le fonctionnement de la sélection des balises, deux options sont disponibles.
Multiple = Plusieurs balises peuvent être sélectionnées en modifiant les éléments filtrés.
Single = Une seule balise peut être sélectionnée, lorsqu'une autre balise est sélectionnée, la balise précédemment sélectionnée est désélectionnée.
Afficher la barre de défilement
Ce contrôle vous permet de basculer la visibilité de la barre de défilement sur le nuage de tags.
Classe de balises
Flexi Filter vous permet de personnaliser davantage le style des balises générées dans le nuage de balises à l'aide de classes personnalisées.
Champ normal
Ce champ vous permet de définir une classe unique qui sera appliquée à toutes les balises.
Champ sélectionné
Ce champ vous permet de définir une classe unique qui sera appliquée à toutes les balises sélectionnées.
Veuillez noter que lorsque vous utilisez les options de classe de balises, tous les styles de balises Flexi Filter par défaut seront supprimés des boutons de balises.
Thème sombre et clair
Vous pouvez définir le thème du champ de saisie et du nuage de mots-clés du filtre Flexi en sélectionnant le conteneur parent du filtre Flexi Bric et en définissant son option de thème Bootstrap sur foncé ou clair. Veuillez noter que cette option est uniquement disponible pour le Bootstrap 5 cadre.
Flexi Filter est disponible à l'achat chez Blocs Stockage.