mip-filter 필터

Filter 구성 요소, PC 및 현명한 너비에 적응합니다. mipengine.org에는

Example

에 대한 참조가 있습니다. 해시에서 필터 항목 찾기를 지원하는 필터링 기능

<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>

Attribute

mip-filter-filterWrap

설명: 필터 버튼 DOM
필수 옵션: Yes
Type : String
Value: document.querySelector()는 ".box"

mip-filter-itemWrap

Description: 필터 항목 DOM
필수 옵션: Yes
Type: String
Value: document와 같은 내용을 채울 수 있습니다. .querySelector ()채울 수 있는 콘텐츠(예: ".box"

mip-filter-enableHash

설명: 해시 제어 지원 여부
필수 옵션: 아니요, 유형: 문자열
값: true, false
기본값: true