讲师中心 微信公众号
AI工具推荐 视频效率加速

MIP文档手册

浏览15340
更新时间2022-04-11

mip-filter 筛选

筛选组件,自适应pc和wise宽度。mipengine.org有引用

QQ截图20170204114318.png

示例

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

<mip-filter mip-filter-filterWrap=".filter" mip-filter-itemWrap=".filter-item-wrap" mip-filter-enableHash="true">
    <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-enableHash

说明:是否支持hash控制
必选项: 否, 类型:字符串
取值:true, false
默认值:true

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn