Flexi-filter is een krachtige, aangepaste Bric waarmee u realtime-inhoudsfiltering aan elke webpagina kunt toevoegen. De Bric is eenvoudig te gebruiken en snel in te stellen.
Hoe te gebruiken
Als je dat eenmaal hebt gedaan gekocht en geïnstalleerd de Flexi Filter Bric, voeg de Bric eenvoudig toe aan uw Blocs project met behulp van de Bric Bar, wijs een Groeps-ID en wijs vervolgens dezelfde ID toe aan elk filterbaar item met behulp van de aangepaste gegevens attribuut data-filter-groep.
U kunt elementen ook filteren op tag met behulp van het data-attribuut data-filter-tags.
Gegevensattributen
De volgende gewoonte gegevenskenmerken worden ondersteund bij gebruik van de Flexi Filter Bric.
data-filter-groep = De groeps-ID die overeenkomt met de Flexi Filter Bric.
data-filter-tags = De tags waarop een element wordt gefilterd. Elke tag moet door een komma worden gescheiden.
Controls
Flexi Filter beschikt over een groot aantal aanpassingsopties waarmee u niet alleen het uiterlijk en de lay-out van de filterbedieningen kunt aanpassen, maar ook de stijl van de filteranimaties.
Groeps-ID
Met deze functie kunt u een unieke ID instellen voor de huidige instantie van Flexi Filter. Dezelfde ID moet worden toegepast op elk filterbaar item met behulp van het data-attribuut. data-filter-groep.
Overeenkomende items
Filteren met behulp van
Met dit besturingselement kunt u selecteren hoe de resultaten worden gefilterd. Er zijn drie opties beschikbaar.
Tekstinhoud = Items worden gefilterd op basis van de tekstinhoud die erin wordt aangetroffen (afbeeldingen gebruiken alt-tekst).
Tag-attribuut = Items worden gefilterd op basis van de inhoud die is ingesteld in het tagkenmerk (data-filter-tags).
Tekst en tags = Items worden gefilterd op basis van de inhoud van zowel de tekst als het tagattribuut.
Klasse Veld
Dit veld kan worden gebruikt om een vooraf gedefinieerde klasse toe te wijzen aan elk gefilterd item. Zo kunt u het uiterlijk en de stijl van gefilterde items aanpassen met een aangepaste klasse.
Uitgesloten artikelen
Style
Met dit besturingselement kunt u de animatiestijl van uitgesloten items aanpassen. Er zijn vijf opties beschikbaar.
Vervagen = Uitgesloten items vervagen en worden vervolgens verborgen.
Verbergen = Uitgesloten items worden direct verborgen.
Krimpen = Uitgesloten items worden kleiner en vervolgens verborgen.
dempen = Uitgesloten items worden semi-transparant en blijven zichtbaar.
Blur = Uitgesloten items worden wazig en blijven zichtbaar.
Invoer veld
Vorm
Met dit besturingselement kunt u de vorm van het filterinvoerveld instellen. Er zijn vier opties beschikbaar.
Startgrootte
Met dit besturingselement kunt u de begingrootte van het filterinvoerveld instellen. Er zijn drie opties beschikbaar.
Normaal = Het invoerveld wordt aanvankelijk op volledige grootte weergegeven.
Compact = Het invoerveld wordt aanvankelijk in de compacte modus weergegeven. Als u erop klikt, wordt het veld tot de volledige grootte vergroot, zodat de gebruiker een zoekopdracht kan invoeren.
verborgen = Het invoerveld is verborgen. Deze optie is alleen bedoeld voor het filteren van tagclouds.
Tijdelijke aanduiding
Met dit veld kunt u de tijdelijke tekst voor de invoervelden instellen.
Pictogram
Style
Met deze optie kunt u de stijl van het vergrootglaspictogram instellen. U kunt uit acht stijlen kiezen.
Functie
Met deze optie kunt u de weergavepositie van het pictogram instellen. U kunt kiezen uit drie opties: links, rechts en verborgen.
Kleur
Met deze optie kunt u de kleur van het vergrootglaspictogram instellen.
tag Cloud
Flexi Filter genereert automatisch een tagcloud op basis van de inhoud van alle data-filter-tags gegevenskenmerken die worden gevonden op filterbare items met een overeenkomende groeps-ID.
Functie
Met dit besturingselement kunt u de positie van de tagcloud instellen. Er zijn vijf opties beschikbaar.
Na het veld = De tagcloud wordt na het invoerveld op dezelfde regel weergegeven.
Boven veld = De tagcloud wordt boven het invoerveld weergegeven.
Voor het veld = De tagcloud wordt vóór het invoerveld op dezelfde regel weergegeven.
Onder veld = De tagcloud wordt onder het invoerveld weergegeven.
verborgen = De tag cloud is verborgen en wordt niet weergegeven.
Uitlijning
Met dit besturingselement kunt u de horizontale uitlijning van de tags binnen de tagcloud instellen.
Vorm
Met dit besturingselement kunt u de vorm van de tags in de tagcloud instellen. Er zijn drie opties beschikbaar.
Selectie
Met dit besturingselement kunt u aanpassen hoe tagselectie werkt. Er zijn twee opties beschikbaar.
meervoudig = Er kunnen meerdere tags worden geselecteerd, waardoor de gefilterde items worden gewijzigd.
Enkele = Er kan slechts één tag worden geselecteerd. Wanneer een andere tag wordt geselecteerd, wordt de eerder geselecteerde tag gedeselecteerd.
Schuifbalk weergeven
Met dit besturingselement kunt u de zichtbaarheid van de schuifbalk op de Tag Cloud in- of uitschakelen.
Tag-klasse
Met Flexi Filter kunt u de stijl van de tags die in de tagcloud worden gegenereerd, verder aanpassen met behulp van aangepaste klassen.
Normaal veld
Met dit veld kunt u één enkele klasse instellen die op alle tags wordt toegepast.
Geselecteerd veld
Met dit veld kunt u één enkele klasse instellen die op alle geselecteerde tags wordt toegepast.
Houd er rekening mee dat wanneer u de tagklasseopties gebruikt, alle standaard Flexi Filter-tagstijlen uit de tagknoppen worden verwijderd.
Donker en licht thema
U kunt het thema van het Flexi Filter-invoerveld en de tagcloud instellen door de bovenliggende container van de Flexi Filter Bric te selecteren en de Bootstrap-themaoptie in te stellen op donker of licht. Let op: deze optie is alleen beschikbaar voor de Bootstrap 5 kader.
Flexi Filter is verkrijgbaar bij de Blocs Shop.