mip-filter 筛选组件

筛选组件,自适应 PC 端和移动端宽度。mipengine.org 有引用。

标题内容
类型通用
支持布局responsive, fixed-height, fill, container, fixed
所需脚本https://c.mipcdn.com/static/v2/mip-filter/mip-filter.js

说明

筛选功能,支持从 hash 定位筛选项。

示例

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<mip-filter mip-filter-filterWrap=".filter" mip-filter-itemWrap=".filter-item-wrap"> <sidebar class="filter"> <div class="filter-result"></div> <ul class="filter-list"> <li class="filter-title"> <div class="filter-link" data-filtertype="all">(all)查看全部 <span class="filter-num">3</span> </div> </li> <li class="filter-title"> <div class="filter-link" data-filtertype="widget">(widget)组件 <span class="filter-num">2</span> </div> </li> <li class="filter-title"> <div class="filter-link" data-filtertype="layout">(layout)组件布局 <span class="filter-num">1</span> </div> </li> </ul> </sidebar> <div class="filter-item-wrap"> <div class="filter-item" data-filtertype="widget"> <span>(widget)组件新增</span> </div> <div class="filter-item" data-filtertype="layout"> <span>(layout)广告组件 layout 升级</span> </div> <div class="filter-item" data-filtertype="widget"> <span>(widget)测试版发布</span> </div> </div> </mip-filter>

自定义筛选文字

下方示例中,mip-filter-filterText="您已经选择:"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<mip-filter mip-filter-filterWrap=".filter" mip-filter-itemWrap=".filter-item-wrap" mip-filter-enableHash="false" mip-filter-filterText="您已经选择:"> <sidebar class="filter"> <div class="filter-result"></div> <ul class="filter-list"> <li class="filter-title"> <div class="filter-link" data-filtertype="all">(all)查看全部 <span class="filter-num">3</span> </div> </li> <li class="filter-title"> <div class="filter-link" data-filtertype="widget">(widget)组件 <span class="filter-num">2</span> </div> </li> <li class="filter-title"> <div class="filter-link" data-filtertype="layout">(layout)组件布局 <span class="filter-num">1</span> </div> </li> </ul> </sidebar> <div class="filter-item-wrap"> <div class="filter-item" data-filtertype="widget"> <span>(widget)组件新增</span> </div> <div class="filter-item" data-filtertype="layout"> <span>(layout)广告组件 layout 升级</span> </div> <div class="filter-item" data-filtertype="widget"> <span>(widget)测试版发布</span> </div> </div> </mip-filter>

属性

mip-filter-filterWrap

说明:筛选按钮 DOM
必选项:是
类型:字符串
取值:document.querySelector() 可填内容,如".box"

mip-filter-itemWrap

说明:筛选项 DOM
必选项:是
类型:字符串
取值:document.querySelector() 可填内容,如".box"

mip-filter-filterText

说明:筛选链接时,前面的文字。可以不填
必选项:否 类型:字符串
取值:例如“筛选:”, “已选择”,“”