フレキシフィルター は、あらゆる Web ページにリアルタイムのコンテンツ フィルタリングを追加できる強力なカスタム Bric です。使いやすく、セットアップも簡単です。
使い方
一度したら 購入した および インストール Flexi Filter Bricを使うには、Bricを Blocs Bric Barを使用してプロジェクトを作成し、 グループID そして、カスタムを使用して、各フィルタ可能なアイテムに同じIDを割り当てます。 データ属性 データフィルタグループ.
データ属性を使用してタグで要素をフィルタリングすることもできます データフィルタータグ.
データ属性
以下の習慣 データ属性 Flexi Filter Bric を使用する場合にサポートされます。
データフィルタグループ = Flexi Filter Bric に一致するグループ ID。
データフィルタータグ = 要素がフィルタリングされるタグ。各タグはコンマで区切る必要があります。
コントロール
Flexi Filter には幅広いカスタマイズ オプションがあり、フィルター コントロールの外観やレイアウトだけでなく、フィルタリング アニメーションのスタイルもカスタマイズできます。
グループID
このコントロールを使用して、Flexi Filterの現在のインスタンスに一意のIDを設定します。データ属性を使用して、フィルタリング可能な各アイテムに同じIDを適用する必要があります。 データフィルタグループ.
一致したアイテム
フィルターの使用
このコントロールを使用すると、結果をフィルタリングする方法を選択できます。3 つのオプションがあります。
テキストコンテンツ = アイテムは、その中に含まれるテキスト コンテンツに基づいてフィルターされます (画像には代替テキストが使用されます)。
タグ属性 = アイテムはタグ属性に設定されたコンテンツに基づいてフィルタリングされます（データフィルタータグ).
テキストとタグ = アイテムは、テキストとタグ属性の両方のコンテンツに基づいてフィルタリングされます。
類体論
このフィールドを使用して、フィルタリングされた各アイテムに定義済みのクラスを割り当てることができます。これにより、カスタムクラスを使用してフィルタリングされたアイテムの外観とスタイルをカスタマイズできます。
除外品目
形式
このコントロールを使用すると、除外されたアイテムのアニメーション スタイルをカスタマイズできます。5 つのオプションがあります。
フェード = 除外されたアイテムはフェードアウトして非表示になります。
隠す = 除外されたアイテムは即座に非表示になります。
縮小する = 除外されたアイテムはサイズが縮小され、非表示になります。
ミュート = 除外されたアイテムは半透明になり、表示されたままになります。
ブラー = 除外された項目はぼやけて表示されます。
入力欄
形状
このコントロールを使用すると、フィルター入力フィールドの形状を設定できます。使用可能なオプションは 4 つあります。
開始サイズ
このコントロールを使用して、フィルター入力フィールドの初期サイズを設定できます。3 つのオプションがあります。
ノーマル = 入力フィールドは最初はフルサイズで表示されます。
コンパクト = 入力フィールドは最初はコンパクト モードで表示されますが、クリックするとフル サイズに拡大され、ユーザーが検索クエリを入力できるようになります。
隠されました = 入力フィールドは非表示です。このオプションはタグ クラウドのみのフィルタリングを目的としています。
プレースホルダーフィールド
このフィールドを使用して、入力フィールドのプレースホルダー テキストを設定します。
アイコン
形式
このオプションを使用して虫眼鏡アイコンのスタイルを設定します。選択できるスタイルは 8 つあります。
役職
このオプションを使用してアイコンの表示位置を設定します。選択できるオプションは、左、右、非表示の 3 つです。
色
このオプションを使用して、虫眼鏡アイコンの色を設定します。
タグ・クラウド
Flexi Filterは、すべてのコンテンツに基づいてタグクラウドを自動的に生成します。 データフィルタータグ 一致するグループ ID を持つフィルタリング可能なアイテムで見つかったデータ属性。
役職
このコントロールを使用すると、タグ クラウドの位置を設定できます。5 つのオプションがあります。
フィールド後 = タグ クラウドは、入力フィールドの後、同じ行に表示されます。
上記のフィールド = タグ クラウドは入力フィールドの上に表示されます。
フィールド前 = タグ クラウドは、入力フィールドの前に同じ行に表示されます。
フィールドの下 = タグ クラウドは入力フィールドの下に表示されます。
隠されました = タグ クラウドは非表示になっており、表示されません。
アラインメント
このコントロールを使用すると、タグ クラウド内のタグの水平方向の配置を設定できます。
形状
このコントロールを使用すると、タグ クラウド内のタグの形状を設定できます。3 つのオプションがあります。
選択
このコントロールを使用すると、タグ選択の動作をカスタマイズできます。2 つのオプションがあります。
複数 = 複数のタグを選択して、フィルタリングされた項目を変更できます。
単発講座 = 選択できるタグは 1 つだけです。別のタグを選択すると、以前に選択したタグは選択解除されます。
スクロールバーを表示
このコントロールを使用すると、タグ クラウド上のスクロール バーの表示を切り替えることができます。
タグクラス
Flexi Filter を使用すると、カスタム クラスを使用して、タグ クラウドで生成されたタグのスタイルをさらにカスタマイズできます。
通常のフィールド
このフィールドでは、すべてのタグに適用される単一のクラスを設定できます。
選択したフィールド
このフィールドでは、選択したすべてのタグに適用される単一のクラスを設定できます。
タグ クラス オプションを使用すると、すべてのデフォルトの Flexi Filter タグ スタイルがタグ ボタンから削除されることに注意してください。
ダーク＆ライトテーマ
Flexi Filterの入力フィールドとタグクラウドのテーマを設定するには、Flexi Filter Bricの親コンテナを選択し、Bootstrapテーマオプションをダークまたはライトに設定します。このオプションは、 ブートストラップ5 フレームワーク。
Flexi Filterは、 Blocs ストア.