Flexi Filter ist ein leistungsstarkes benutzerdefiniertes Bric, mit dem Sie jeder Webseite eine Inhaltsfilterung in Echtzeit hinzufügen können. Es ist einfach zu verwenden und schnell einzurichten.
Anleitung von
Sobald du hast gekauft und installiert den Flexi Filter Bric, fügen Sie den Bric einfach zu Ihrem Blocs Projekt mit der Bric Bar, weisen Sie eine Gruppen-ID und weisen Sie dann jedem filterbaren Element mithilfe der benutzerdefinierten Datenattribut Datenfiltergruppe.
Sie können Elemente auch nach Tags filtern, indem Sie das Datenattribut verwenden Datenfilter-Tags.
Datenattribute
Der folgende Brauch Datenattribute werden bei Verwendung des Flexi Filter Bric unterstützt.
Datenfiltergruppe = Die Gruppen-ID, die mit dem Flexi-Filter Bric übereinstimmt.
Datenfilter-Tags = Die Tags, nach denen ein Element gefiltert wird. Jedes Tag sollte durch ein Komma getrennt werden.
Steuerelemente
Flexi Filter verfügt über zahlreiche Anpassungsoptionen, mit denen Sie nicht nur das Aussehen und Layout der Filtersteuerungen, sondern auch den Stil der Filteranimationen anpassen können.
Gruppen-ID
Verwenden Sie dieses Steuerelement, um eine eindeutige ID für die aktuelle Instanz von Flexi Filter festzulegen. Dieselbe ID sollte für jedes filterbare Element mithilfe des Datenattributs verwendet werden. Datenfiltergruppe.
Passende Artikel
Filtern mit
Mit diesem Steuerelement können Sie auswählen, wie die Ergebnisse gefiltert werden. Es stehen drei Optionen zur Verfügung.
Textinhalt = Elemente werden basierend auf dem darin enthaltenen Textinhalt gefiltert (Bilder verwenden Alternativtext).
Tag-Attribut = Elemente werden basierend auf dem im Tag-Attribut festgelegten Inhalt gefiltert (Datenfilter-Tags).
Text und Tags = Elemente werden sowohl nach Text als auch nach Tag-Attributinhalt gefiltert.
Klassenfeld
In diesem Feld können Sie jedem gefilterten Element eine vordefinierte Klasse zuweisen. So können Sie das Aussehen und den Stil gefilterter Elemente mithilfe einer benutzerdefinierten Klasse anpassen.
Ausgeschlossene Artikel
Design
Mit diesem Steuerelement können Sie den Animationsstil ausgeschlossener Elemente anpassen. Es stehen fünf Optionen zur Verfügung.
Verblassen = Ausgeschlossene Elemente werden ausgeblendet und dann verborgen.
Verbergen = Ausgeschlossene Elemente werden sofort ausgeblendet.
Schrumpfen = Ausgeschlossene Elemente werden verkleinert und dann ausgeblendet.
Stumm = Ausgeschlossene Elemente werden halbtransparent und bleiben sichtbar.
Blur = Ausgeschlossene Elemente werden unscharf dargestellt und bleiben sichtbar.
Eingabefeld
Shape
Mit diesem Steuerelement können Sie die Form des Filtereingabefelds festlegen. Es stehen vier Optionen zur Verfügung.
Startgröße
Mit diesem Steuerelement kann die anfängliche Größe des Filtereingabefelds festgelegt werden. Es stehen drei Optionen zur Verfügung.
Normal = Das Eingabefeld wird zunächst in voller Größe angezeigt.
Compact = Das Eingabefeld wird zunächst im kompakten Modus angezeigt. Durch Klicken darauf wird es auf die volle Größe erweitert, sodass der Benutzer eine Suchanfrage eingeben kann.
versteckt = Das Eingabefeld ist ausgeblendet. Diese Option ist nur zum Filtern der Tag-Cloud vorgesehen.
Platzhalterfeld
Verwenden Sie dieses Feld, um den Platzhaltertext der Eingabefelder festzulegen.
Icon
Design
Verwenden Sie diese Option, um den Stil des Lupensymbols festzulegen. Es stehen acht zur Auswahl.
Position
Verwenden Sie diese Option, um die Anzeigeposition des Symbols festzulegen. Sie können zwischen drei Optionen wählen: links, rechts und ausgeblendet.
Farbe
Verwenden Sie diese Option, um die Farbe des Lupensymbols festzulegen.
Schlagwörter
Flexi Filter generiert automatisch eine Tag-Cloud basierend auf den Inhalten aller Datenfilter-Tags Datenattribute, die in filterbaren Elementen mit einer übereinstimmenden Gruppen-ID gefunden werden.
Position
Mit diesem Steuerelement können Sie die Position der Tag-Cloud festlegen. Es stehen fünf Optionen zur Verfügung.
Nach dem Feld = Die Tag-Cloud wird nach dem Eingabefeld in der gleichen Zeile angezeigt.
Über dem Feld = Die Tag-Cloud wird über dem Eingabefeld angezeigt.
Vor dem Feld = Die Tag-Cloud wird vor dem Eingabefeld in der gleichen Zeile angezeigt.
Unterhalb des Feldes = Die Tag-Cloud wird unterhalb des Eingabefeldes angezeigt.
versteckt = Die Tag-Cloud ist ausgeblendet und wird nicht angezeigt.
Ausrichtung
Mit diesem Steuerelement können Sie die horizontale Ausrichtung der Tags innerhalb der Tag-Cloud festlegen.
Shape
Mit diesem Steuerelement können Sie die Form der Tags innerhalb der Tag-Cloud festlegen. Es stehen drei Optionen zur Verfügung.
Auswahl
Mit diesem Steuerelement können Sie die Funktionsweise der Tag-Auswahl anpassen. Es stehen zwei Optionen zur Verfügung.
Mehrere = Es können mehrere Tags ausgewählt werden, wodurch die gefilterten Elemente geändert werden.
Einwellig = Es kann nur ein einzelnes Tag ausgewählt werden. Wenn ein anderes Tag ausgewählt wird, wird die Auswahl des zuvor ausgewählten Tags aufgehoben.
Bildlaufleiste anzeigen
Mit diesem Steuerelement können Sie die Sichtbarkeit der Bildlaufleiste in der Tag-Cloud umschalten.
Tag-Klasse
Mit Flexi Filter können Sie den Stil der in der Tag-Cloud generierten Tags mithilfe benutzerdefinierter Klassen weiter anpassen.
Normales Feld
In diesem Feld können Sie eine einzelne Klasse festlegen, die auf alle Tags angewendet wird.
Ausgewähltes Feld
In diesem Feld können Sie eine einzelne Klasse festlegen, die auf alle ausgewählten Tags angewendet wird.
Bitte beachten Sie, dass bei Verwendung der Tag-Klassenoptionen alle standardmäßigen Flexi-Filter-Tag-Stile aus den Tag-Schaltflächen entfernt werden.
Dunkles und helles Thema
Sie können das Design des Flexi-Filter-Eingabefelds und der Tag-Cloud festlegen, indem Sie den übergeordneten Container des Flexi-Filter-Bric auswählen und dessen Bootstrap-Design auf dunkel oder hell einstellen. Bitte beachten Sie, dass diese Option nur für die Bootstrap 5 Rahmen.
Flexi Filter gibt es zu kaufen bei Blocs Shop.