篩選器

依據中繼資料篩選或排序任何給定版面配置中的項目。

篩選器組件通常與網格組件一起使用，尤其是磚砌網格，但它不限於此。無論項目的位置如何，任何版面配置都可以篩選或排序。項目會在不同的篩選和排序狀態之間淡入淡出並平滑過渡移動。

用法

若要套用此組件，您需要一個帶有 uk-filter="target: SELECTOR" 屬性的容器元素。在此容器內建立一個篩選控制項列表，以及您要篩選的版面配置項目。使用 target: SELECTOR 選項來選取包含版面配置項目的元素。

<div uk-filter="target: .js-filter">

    <!-- Filter controls -->
    <ul>
        <li><a href="#"></a></li>
    </ul>

    <!-- Layout items -->
    <ul class="js-filter">
        <li></li>
    </ul>

</div>

接下來，我們需要為每個版面配置項目定義中繼資料，例如項目所屬的類別。使用任何 HTML 類別或屬性來執行此操作。

若要套用篩選控制項，請新增 uk-filter-control 屬性。若要定義應篩選的中繼資料，請使用 filter: SELECTOR 選項。選取器可以是任何 CSS 選取器，例如您為版面配置項目定義的 HTML 類別或屬性。

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="filter: .tag-blue"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li class="tag-blue"></li>
    </ul>

</div>

如果 target 是 uk-filter 屬性值中唯一的選項，您也可以使用 uk-filter="SELECTOR"。這也適用於篩選控制項。如果 filter 是 uk-filter-control 屬性值中唯一的選項，您也可以使用 uk-filter-control="SELECTOR"。

<div uk-filter=".js-filter">

    <ul>
        <li uk-filter-control=".tag-blue"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li class="tag-blue"></li>
    </ul>

</div>

項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li uk-filter-control=".tag-white"><a href="#">White</a></li>
        <li uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
        <li uk-filter-control=".tag-black"><a href="#">Black</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
    </ul>

</div>

篩選器組件沒有設定樣式，這允許您使用任何其他 UIkit 組件來建立篩選控制項和版面配置項目。例如，導覽列、子導覽和標籤頁組件可用於設定篩選控制項的樣式。通常，網格組件用於建立項目版面配置。

動畫

預設情況下，篩選器會對不同篩選狀態之間的項目使用 slide 動畫。若要套用不同的動畫，只需將 animation 選項新增至屬性即可。

動畫	描述
`滑動`	淡入和淡出項目，或將其滑動到新位置。
`淡化`	淡入和淡出所有項目。
`延遲淡化`	稍微延遲淡入和淡出項目。

<div uk-filter="animation: fade">…</div>

項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目

<div uk-filter="target: .js-filter; animation: fade">

    <ul class="uk-subnav uk-subnav-pill">
        <li uk-filter-control=".tag-white"><a href="#">White</a></li>
        <li uk-filter-control=".tag-blue"><a href="#">Blue</a></li>
        <li uk-filter-control=".tag-black"><a href="#">Black</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li class="tag-blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li class="tag-black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
    </ul>

</div>

活動狀態

將 .uk-active 類別新增至篩選控制項，篩選器將會在初始套用。

<li class="uk-active" uk-filter-control="[data-color='blue']">…</li>

項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control="[data-color='white']"><a href="#">White</a></li>
        <li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
        <li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
    </ul>

</div>

重設篩選器

若要重設篩選器並以所有項目為目標，請使用未指定任何選取器的 uk-filter-control 屬性。

<li uk-filter-control>…</li>

項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control><a href="#">All</a></li>
        <li uk-filter-control="[data-color='white']"><a href="#">White</a></li>
        <li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
        <li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-color="blue">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-color="black">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
    </ul>

</div>

中繼資料

項目可以有不同的中繼資料用於篩選。您只需定義 HTML 類別或 data 屬性，並為篩選控制項建立對應的 CSS 選取器。此範例會使用 data 屬性進行篩選，而不是使用 HTML 類別。

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="[data-tags*='blue']"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-tags="blue dark"></li>
    </ul>

</div>

項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li uk-filter-control="[data-tags*='white']"><a href="#">White</a></li>
        <li uk-filter-control="[data-tags*='blue']"><a href="#">Blue</a></li>
        <li uk-filter-control="[data-tags*='black']"><a href="#">Black</a></li>
        <li uk-filter-control="[data-tags*='dark']"><a href="#">Dark Colors</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-tags="white">
            <div class="uk-card uk-card-default uk-card-body">Item</div>
        </li>
        <li data-tags="blue dark">
            <div class="uk-card uk-card-primary uk-card-body">Item</div>
        </li>
        <li data-tags="black dark">
            <div class="uk-card uk-card-secondary uk-card-body">Item</div>
        </li>
    </ul>

</div>

多重篩選器

定義不同類型中繼資料，並新增任意數量的控制項來篩選它們。篩選控制項是互斥的，表示一次只篩選一個條件。

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="[data-color='blue']"><a href="#"></a></li>
    </ul>

    <ul>
        <li uk-filter-control="[data-size='small']"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue" data-size="small"></li>
    </ul>

</div>

全部

項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目

<div uk-filter="target: .js-filter">

    <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li class="uk-active" uk-filter-control><a href="#">All</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="[data-color='white']"><a href="#">White</a></li>
                <li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
                <li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="[data-size='small']"><a href="#">Small</a></li>
                <li uk-filter-control="[data-size='medium']"><a href="#">Medium</a></li>
                <li uk-filter-control="[data-size='large']"><a href="#">Large</a></li>
            </ul>
        </div>
    </div>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="small">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="medium">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="small">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="medium">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="large">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="large">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
    </ul>

</div>

群組

若要同時依多個條件篩選項目，篩選控制項需要分組。只需將 group: NAME 選項新增至 uk-filter-control 屬性，並為中繼資料定義群組名稱。

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="filter: [data-color='blue']; group: color"><a href="#"></a></li>
        <li uk-filter-control="filter: [data-color='white']; group: color"><a href="#"></a></li>
    </ul>

    <ul>
        <li uk-filter-control="filter: [data-size='small']; group: size"><a href="#"></a></li>
        <li uk-filter-control="filter: [data-size='large']; group: size"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue" data-size="small"></li>
    </ul>

</div>

全部

項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目
項目

<div uk-filter="target: .js-filter">

    <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li class="uk-active" uk-filter-control><a href="#">All</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="filter: [data-color='white']; group: data-color"><a href="#">White</a></li>
                <li uk-filter-control="filter: [data-color='blue']; group: data-color"><a href="#">Blue</a></li>
                <li uk-filter-control="filter: [data-color='black']; group: data-color"><a href="#">Black</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-subnav uk-subnav-pill" uk-margin>
                <li uk-filter-control="filter: [data-size='small']; group: size"><a href="#">Small</a></li>
                <li uk-filter-control="filter: [data-size='medium']; group: size"><a href="#">Medium</a></li>
                <li uk-filter-control="filter: [data-size='large']; group: size"><a href="#">Large</a></li>
            </ul>
        </div>
    </div>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="small">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="medium">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="small">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="medium">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="large">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="large">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="white" data-size="large">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
        <li data-color="black" data-size="small">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">Item</div>
            </div>
        </li>
    </ul>

</div>

排序

若要依字母數字順序排序項目，只需將 sort: ATTRIBUTE 選項新增至 uk-filter-control 屬性，並定義應排序項目的中繼資料屬性。預設情況下，項目會依遞增順序排序。新增 order: desc 以依遞減順序排序項目。

<div uk-filter="target: .js-filter">

    <ul>
        <li uk-filter-control="sort: data-color"><a href="#"></a></li>
        <li uk-filter-control="sort: data-color; order: desc"><a href="#"></a></li>
    </ul>

    <ul class="js-filter">
        <li data-color="blue"></li>
    </ul>

</div>

2016-06-01
2016-12-13
2017-05-20
2017-09-17
2017-11-03
2017-12-25
2018-01-30
2018-02-01
2018-03-11
2018-06-13
2018-10-27
2018-12-02

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li class="uk-active" uk-filter-control="sort: data-date"><a href="#">Ascending</a></li>
        <li uk-filter-control="sort: data-date; order: desc"><a href="#">Descending</a></li>
    </ul>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid>
        <li data-date="2016-06-01">
            <div class="uk-card uk-card-default uk-card-body">2016-06-01</div>
        </li>
        <li data-date="2016-12-13">
            <div class="uk-card uk-card-primary uk-card-body">2016-12-13</div>
        </li>
        <li data-date="2017-05-20">
            <div class="uk-card uk-card-default uk-card-body">2017-05-20</div>
        </li>
        <li data-date="2017-09-17">
            <div class="uk-card uk-card-default uk-card-body">2017-09-17</div>
        </li>
        <li data-date="2017-11-03">
            <div class="uk-card uk-card-secondary uk-card-body">2017-11-03</div>
        </li>
        <li data-date="2017-12-25">
            <div class="uk-card uk-card-secondary uk-card-body">2017-12-25</div>
        </li>
        <li data-date="2018-01-30">
            <div class="uk-card uk-card-primary uk-card-body">2018-01-30</div>
        </li>
        <li data-date="2018-02-01">
            <div class="uk-card uk-card-secondary uk-card-body">2018-02-01</div>
        </li>
        <li data-date="2018-03-11">
            <div class="uk-card uk-card-primary uk-card-body">2018-03-11</div>
        </li>
        <li data-date="2018-06-13">
            <div class="uk-card uk-card-default uk-card-body">2018-06-13</div>
        </li>
        <li data-date="2018-10-27">
            <div class="uk-card uk-card-primary uk-card-body">2018-10-27</div>
        </li>
        <li data-date="2018-12-02">
            <div class="uk-card uk-card-secondary uk-card-body">2018-12-02</div>
        </li>
    </ul>

</div>

磚砌網格

篩選器通常會套用至磚砌網格。篩選器轉場效果可完美搭配任何類型的版面配置，無論項目的位置如何。它甚至適用於網格的視差選項。

以下是一個包含磚砌網格的完整範例

全部

<div uk-filter="target: .js-filter">

    <div class="uk-grid-small uk-flex-middle" uk-grid>
        <div class="uk-width-expand">

            <div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <li class="uk-active" uk-filter-control><a href="#">All</a></li>
                    </ul>
                </div>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <li uk-filter-control="[data-color='white']"><a href="#">White</a></li>
                        <li uk-filter-control="[data-color='blue']"><a href="#">Blue</a></li>
                        <li uk-filter-control="[data-color='black']"><a href="#">Black</a></li>
                    </ul>
                </div>
                <div>
                    <ul class="uk-subnav uk-subnav-pill" uk-margin>
                        <li uk-filter-control="[data-size='small']"><a href="#">Small</a></li>
                        <li uk-filter-control="[data-size='medium']"><a href="#">Medium</a></li>
                        <li uk-filter-control="[data-size='large']"><a href="#">Large</a></li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="uk-width-auto uk-text-nowrap">


            <span class="uk-active" uk-filter-control="sort: data-name"><a class="uk-icon-link" href="#" uk-icon="icon: arrow-down" aria-label="Sort ascending"></a></span>
            <span uk-filter-control="sort: data-name; order: desc"><a class="uk-icon-link" href="#" uk-icon="icon: arrow-up" aria-label="Sort descending"></a></span>

        </div>
    </div>

    <ul class="js-filter uk-child-width-1-2 uk-child-width-1-3@m uk-text-center" uk-grid="masonry: true">
        <li data-color="white" data-size="large" data-name="A">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">A</div>
            </div>
        </li>
        <li data-color="blue" data-size="small" data-name="B">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">B</div>
            </div>
        </li>
        <li data-color="white" data-size="medium" data-name="C">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">C</div>
            </div>
        </li>
        <li data-color="white" data-size="small" data-name="D">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">D</div>
            </div>
        </li>
        <li data-color="black" data-size="medium" data-name="E">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">E</div>
            </div>
        </li>
        <li data-color="black" data-size="small" data-name="F">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">F</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium" data-name="G">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">G</div>
            </div>
        </li>
        <li data-color="black" data-size="large" data-name="H">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">H</div>
            </div>
        </li>
        <li data-color="blue" data-size="large" data-name="I">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">I</div>
            </div>
        </li>
        <li data-color="white" data-size="large" data-name="J">
            <div class="uk-card uk-card-default uk-card-body">
                <canvas width="600" height="800"></canvas>
                <div class="uk-position-center">J</div>
            </div>
        </li>
        <li data-color="blue" data-size="medium" data-name="K">
            <div class="uk-card uk-card-primary uk-card-body">
                <canvas width="600" height="600"></canvas>
                <div class="uk-position-center">K</div>
            </div>
        </li>
        <li data-color="black" data-size="small" data-name="L">
            <div class="uk-card uk-card-secondary uk-card-body">
                <canvas width="600" height="400"></canvas>
                <div class="uk-position-center">L</div>
            </div>
        </li>
    </ul>

</div>

組件選項

這些選項中的任何一個都可以套用至組件屬性。使用分號分隔多個選項。深入瞭解

選項	值	預設值	描述
`target`	字串		要將篩選器套用到的目標清單。
`selActive`	字串、布林值	`false`	用於初始活動篩選控制項的選取器。
`animation`	字串、布林值	`滑動`	動畫模式 (`slide`、`fade`、`delayed-fade` 或 `false`)。
`duration`	數字	`250`	動畫持續時間，以毫秒為單位。

target 是主要選項，如果它是屬性值中唯一的選項，則可以省略其金鑰。

JavaScript

深入瞭解JavaScript 組件。

初始化

UIkit.filter(element, options);

事件

在附加此組件的元素上會觸發以下事件

名稱	描述
`beforeFilter`	在套用篩選器之前觸發。
`afterFilter`	在套用篩選器之後觸發。

輔助功能

篩選器組件會自動設定適當的 WAI-ARIA 角色、狀態和屬性。

篩選控制項具有 aria-selected 狀態。

文件

篩選器