筛选器

通过元数据筛选或排序任何给定布局中的项目。

筛选器组件通常与栅格组件一起使用，尤其是 masonry 栅格，但它并不受限于此。任何布局都可以被筛选或排序，无论项目如何定位。项目在不同的筛选和排序状态之间淡入淡出并平滑过渡。

用法

要应用此组件，您需要一个带有 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 选项添加到属性中即可。

动画	描述
`slide`	淡入淡出或滑动项目到其新位置。
`fade`	淡入淡出所有项目。
`delayed-fade`	淡入淡出项目，略有延迟。

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

Masonry 栅格

筛选器通常应用于 Masonry 栅格。筛选器过渡与任何类型的布局完美配合，无论项目如何定位。它甚至可以与栅格的 Parallax 选项一起使用。

这是一个带有 masonry 栅格的综合示例

全部

<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`	动画模式（`slide`、`fade`、`delayed-fade` 或 `false`）。
`duration`	数字	`250`	动画持续时间（毫秒）。

target 是主要选项，如果它是属性值中唯一的选项，则可以省略其键。

JavaScript

了解更多关于JavaScript 组件的信息。

初始化

UIkit.filter(element, options);

事件

以下事件将在附加此组件的元素上触发

名称	描述
`beforeFilter`	在应用筛选器之前触发。
`afterFilter`	在应用筛选器之后触发。

可访问性

筛选器组件会自动设置适当的 WAI-ARIA 角色、状态和属性。

筛选控件具有 aria-selected 状态。

文档

筛选器