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

属性

mip-filter-filterWrap

説明: フィルター ボタン DOM
必須オプション: はい
タイプ:文字列
値:document.querySelector()で「.box」などの内容を入力可能

mip-filter-itemWrap

説明:フィルター項目DOM
必須オプション:Yes
型:String
値:document .querySelector ()「.box」などの入力可能なコンテンツ

mip-filter-enableHash

説明: ハッシュ制御をサポートするかどうか
必須オプション: いいえ、 型: 文字列
値: true、false
デフォルト値: true