筛选器 MDB Pro component

过滤器-Bootstrap 5和Material Design 2.0插件

过滤器是选择满足您要求的数据的最佳方法-它们会影响您的搜索 通过过滤和排序传递给我们组件的数据集可以得到结果。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制

View full screen demo

基本示例-DOM元素

使用 data-mdb-items 属性定义一个包含要过滤数据的容器。这个 需要进行正确的组件初始化。

data-mdb-filter =“ property” 添加到您希望可过滤的每个项目中。如果你 想要通过输入处理过滤器,为其创建容器并添加 data-mdb-filter =“ property”

注意:您必须至少具有一个可过滤元素,组件才能工作 正确地。

Filter: Color
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

复选框示例

注意:如果有多个选项,则会显示过滤结果 两者都匹配的项目。

Filter: Color
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

颜色示例

Filter: Color

...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

尺寸示例

Filter: Size
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

带有DOM元素的动画

.animation .animation-name 类添加到可过滤元素,以 给他们做动画。您可以找到可用动画的完整列表 此处

Filter: Color
Filter: Sale
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

数据结构-数组

注意:您的 data-mdb-items 集可以是一组项目。我们创造 满足后端需求的解决方案。只需使用构造函数设置数据集即可。

Filter: Color
Filter: Sale

微调器和异步数据示例

Price:


动画-项目数组

.animation .animation-name 类添加到呈现的元素,以 给他们做动画。您可以找到可用动画的完整列表 此处

Filter: Color
Filter: Sale

筛选和排序

Filter: Color
Filter: Sale

自定义-自定义过滤器

在过滤器对象处传递箭头函数作为过滤器键的值,以定义您的 自定义过滤器。

Price:

Current: 80$

Current: 120$

...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now
...
Blue Jeans Jacket

90$

Buy now
...
Red Hoodie

150$ 120$

Buy now
...
Black Jeans Jacket

100$

Buy now
...
Gray Jumper

100$ 80$

Buy now

自定义排序

传递箭头功能(带有两个参数-上一个和第二个比较项)作为 排序功能的第三个参数定义您的自定义排序规则。


全屏示例

View full screen demo

筛选器 - API


用法

通过数据属性


      <div id="myFilters" data-mdb-auto-filter="true" data-mdb-items=".filters-item">
        <div id="inputsGroup">
          <div data-mdb-filter="color">
            <div class="form-check mt-3">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="red" />
              <label class="form-check-label" for="inlineCheckbox1">Red</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="blue" />
              <label class="form-check-label" for="inlineCheckbox2">Blue</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="black" />
              <label class="form-check-label" for="inlineCheckbox3">Black</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="gray" />
              <label class="form-check-label" for="inlineCheckbox4">Gray</label>
            </div>
          </div>

          <div data-mdb-filter="sale">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="yes" />
              <label class="form-check-label" for="inlineCheckbox3">No</label>
            </div>

            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="inlineCheckbox6" value="no" />
              <label class="form-check-label" for="inlineCheckbox4">No</label>
            </div>
          </div>
        </div>

        <div class="filters-item" data-mdb-color="blue" data-mdb-sale="no">
          <span>Color: blue, Sale: No</span>
        </div>
        <div class="filters-item" data-mdb-color="red" data-mdb-sale="yes">
          <span>Color: red, Sale: No</span>
        </div>
        <div class="filters-item" data-mdb-color="red" data-mdb-sale="no">
          <span>Color: red, Sale: yes</span>
        </div>
        <div class="filters-item" data-mdb-color="yellow" data-mdb-sale="yes">
          <span>Color: yellow, Sale: yes</span>
        </div>
      </div>
    

通过JavaScript


      const filtersInstance = new Filters(document.getElementById('myFilters'), options)
    

通过jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.


      $('.example-class').filters(options);
    

选件

Name Type Default Description
data-mdb-items String - Sets a selector for filtering items.
data-mdb-property String - Defines a filter value for an item. Swap property with a filter name that your items should have.
data-mdb-filter String - Sets a filter handler to the input group that it is applied to.
data-mdb-auto-filter String false Applied to an instance enables auto filtering by inputs.

方法

Name Description Example
dispose Destroys an Filters instance filtersInstance.dispose()
filter Filters an instance dataset filtersInstance.filter(options)
getFilters Returns all available filters filtersInstance.getFilters()
getActiveFilters Returns all active filters filtersInstance.getActiveFilters()
clear Clears all filters filtersInstance.clear()
sort Sorts an instance dataset filtersInstance.sort(category, order, additionalCustomSort)

      const filtersElement = document.getElementById('filtersElement');
      const filtersInstance = new Filters(filtersElement);

      filtersInstance.filter({
        color: ['red', 'blue'],
        sale: ['no']
      });
    

大事记

Name Description
update.mdb.filters This event fires immediately when the instance filters or sort its dataset.

      const filtersElement = document.getElementById('filtersElement');

      filtersElement.addEventListener('update.mdb.filters', function (e) {
        // do something...
      });
    

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:


      import { Filters } from 'mdb-ui-kit';